Frontend / CSS-in-JS
Javascript İçinde CSS Yazmak: Styled Components
Styled Components ile CSS-in-JS yaklaşımının dinamik stilleme, performans ve bakım taraflarını sade bir örnek üzerinden inceliyorum.
Yaklaşım
Neden Styled Components?
Styled Components ile JavaScript içerisinde CSS yazmak, modern web geliştirme yöntemlerinde önemli bir konuma sahip. Bu geliştirme yaklaşımı, özellikle bileşen tabanlı geliştirme süreçlerinde stil ve bileşen mantığını bir arada tutarak daha tutarlı ve yönetilebilir uygulamalar oluşturmanızı sağlar.
Styled Components, CSS-in-JS kütüphanesi olarak stil tanımlarınızı JavaScript dosyaları içinde güvenli bir şekilde saklamanıza ve bileşenlerinizle doğrudan ilişkilendirmenize olanak tanır. Dinamik stillemeler, tema desteği ve props üzerinden stil değişiklikleri gibi özellikleriyle geliştiricilere esnek ve güçlü bir araç sunar. Bu metodoloji, stil çakışmalarını önler ve uygulamanızın farklı cihaz ve ekran boyutlarına uyum sağlamasını kolaylaştırır. Styled Components kullanarak daha okunabilir, modüler ve yeniden kullanılabilir kodlar yazabilir, geliştirme sürecinizi hızlandırabilirsiniz.
Öne çıkanlar
Öne çıkan avantajlar
- 01
Props üzerinden dinamik CSS
React'ın güçlü özelliklerinden biri olan props üzerinden dinamik CSS tanımlamaları yapabilme olanağı sağlar. Uygulamanızın farklı durumlarına veya kullanıcı etkileşimlerine göre stil değişikliklerini kolaylaştırır.
- 02
Gerektiği kadar CSS
Yalnızca ekranda render edilen componentler için gerekli CSS kodlarını yükler. Gereksiz CSS yükünün önüne geçerek sayfa yükleme sürelerinin kısalmasına katkıda bulunur.
- 03
Stilde JavaScript fonksiyonları
CSS tanımlarınız içerisinde JavaScript fonksiyonlarından faydalanabilirsiniz. Bu, stilleri daha dinamik hale getirir ve uygulamanın farklı bölümlerindeki yeniden kullanılabilirliği artırır.
- 04
Kritik CSS'in otomatik eklenmesi
Bir sayfada hangi bileşenlerin render edildiğini takip eder ve yalnızca bu bileşenlere özgü stilleri dinamik olarak sayfaya enjekte eder. Böylece yalnızca ihtiyaç duyulan CSS yüklenir.
- 05
Sınıf adı çakışmalarının önlenmesi
Her styled component için benzersiz sınıf adları otomatik olarak oluşturulur. Stiller arasındaki çakışma ya da sınıf adı yazım hataları gibi sorunların önüne geçilir.
- 06
CSS'i temizlemeyi kolaylaştırması
Her stil doğrudan ilgili bileşene atanır. Bir bileşen projeden kaldırıldığında ona ait stil tanımlamalarını da beraberinde temizlemek kolaylaşır; kod tabanı yönetilebilir kalır.
- 07
Kolay dinamik stilleme
Kompleks ve çok sayıda sınıf yönetimiyle uğraşmak yerine, props üzerinden dinamik stil değişiklikleri yaparak farklı durumlara kolayca uyum sağlayabilirsiniz.
- 08
Kolay bakım
Bir bileşenin stilini değiştirmek için doğru CSS dosyasını aramak gerekmez. Stil, bileşenin kendisiyle aynı yerde saklandığı için bakım ve güncellemeler daha basit ilerler.
- 09
Tarayıcı ön eklerinin otomatik eklenmesi
CSS kodu otomatik olarak işlenir ve gerekli tarayıcı ön ekleri eklenir. Bu, stil tanımlarının çeşitli tarayıcılarda sorunsuz çalışmasına yardımcı olur.
Temiz bir React projesiyle başlamak
styled-comp adında temiz bir proje oluşturuyorum. Projeyi oluşturduktan sonra işime yaramayacak kod ve dosyaları kaldırıyor, terminalden proje dizinine giriş yapıp npm install komutunu yazıyorum.
$ npx create-react-app styled-comp$ npm installStyled Components'ı eklemek
Yeni oluşturduğumuz React projesinde Styled Components kullanabilmek için paketi projeye kurmamız gerekiyor.
$ npm install styled-componentsÖrnek bileşen yapısı
Örnek bir uygulama için projemin src/components konumunda Title adında bir component oluşturuyorum. Title klasörü içerisinde bir adet index.js; stilleri ayrı bir JavaScript dosyasında tutmak için de style.js dosyasını oluşturuyorum.
Title componentini bağlamak
Her şey hazır olduğunda Title componentimizin index.js kodlarını yazmaya başlayabiliriz. Burada Title adında bir component ve bu componentin içinde text adında bir prop oluşturuyoruz. Bu text, TitleWrapper ile stilize edilmiş şekilde gösterilir.
Ardından components/Title/style.js dosyasında TitleWrapper componentinin stillerini tanımlıyoruz. Styled Components kullanarak bir h1 elementi için stil tanımladığımızda, bu stil Title componentimizin görünümünü belirler.
Uygulama içinde görmek
Son olarak uygulamamızda yaptığımız örneği görebilmek için app.js dosyamızı düzenliyoruz. Çok detaya girmeden Styled Components kullanımını en basit ve anlaşılır haliyle bu şekilde göstermiş oldum.