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 (component) tabanlı geliştirme süreçlerinde stil ve bileşen mantığı bir arada tutarak, daha tutarlı ve yönetilebilir uygulamalar oluşturmanızı sağlar.
Styled Components Nedir?
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.
Styled Components Kullanmanın Avantajları
- Styled Components kullanmanın avantajları arasında, React’ın güçlü özelliklerinden biri olan props üzerinden dinamik CSS tanımlamaları yapabilme olanağı bulunmaktadır. Bu, uygulamanızın farklı durumlarına veya kullanıcı etkileşimlerine göre stil değişiklikleri yapmanızı kolaylaştırır.
- Uygulamanızın performansını optimize eden bir özellik sunar: yalnızca ekranda render edilen componentler için gerekli olan CSS kodlarını yükler. Bu da, gereksiz CSS yükünün önüne geçerek sayfa yükleme sürelerinin kısalmasına katkıda bulunur.
- Bir diğer önemli avantaj ise, CSS tanımlarınız içerisinde JavaScript fonksiyonlarından faydalanabilme imkanıdır. Bu sayede, stil tanımlarınızı daha dinamik hale getirebilir ve uygulamanızın farklı bölümlerinde yeniden kullanılabilirliği artırabilirsiniz.
Styled Components Özellikleri
- Automatic Critical CSS: Styled Components, bir sayfada hangi bileşenlerin render edildiğini akıllıca takip eder ve yalnızca bu bileşenlere özgü stilleri dinamik olarak sayfaya enjekte eder. Bu süreç, gereksiz stil kodlarının önlenmesine yardımcı olur ve yalnızca ihtiyaç duyulan CSS’in yüklenmesini sağlayarak optimizasyon açısından büyük bir avantaj sunar.
- No Class Name Bugs: Her bir styled component için benzersiz sınıf adları otomatik olarak oluşturulur. Bu yaklaşım, stiller arasında çakışma ya da sınıf adı yazım hataları gibi sorunların ortadan kalkmasını sağlar ve böylece CSS hatalarının önüne geçer.
- Easier Deletion of CSS: Styled Components ile her stil doğrudan ilgili bileşene atanır. Bu sayede, bir bileşen projeden kaldırıldığında, ona ait stil tanımlamaları da otomatik olarak silinebilir. Bu özellik, kod tabanını temiz ve yönetilebilir tutmaya katkıda bulunur.
- Simple Dynamic Styling: Kompleks ve çok sayıda sınıf yönetimi ile uğraşmanıza gerek kalmaz. Props üzerinden dinamik stil değişiklikleri yaparak, uygulamanızın farklı durumlarına kolayca uyum sağlayabilirsiniz.
- Painless Maintenance: Bir bileşenin stilini değiştirmek istediğinizde, hangi CSS dosyasının düzenlenmesi gerektiğini bulmak için saatler harcamanıza gerek yoktur. Her bileşenin stili, bileşenin kendisi ile aynı yerde saklandığından, bakım ve güncellemeler son derece basit ve hızlı bir şekilde gerçekleştirilebilir.
- Automatic Vendor Prefixing: CSS yazarken tarayıcı uyumluluğu konusunda endişelenmenize gerek yoktur. Styled Components, CSS kodunuzu otomatik olarak işler ve gerekli tarayıcı ön eklerini (vendor prefixes) ekler. Bu, stil tanımlarınızın çeşitli tarayıcılarda sorunsuz çalışmasını garanti altına alır.
React Uygulamalarında Styled Components Kullanımı
1. Temiz Bir Proje Oluşturalım
$ npx create-react-app komutu ile styled-comp adında temiz bir proje oluşturuyorum. Projeyi oluşturduktan sonra işime yaramayacak kod ve dosyaları kaldırıyor ve terminalden proje dizine giriş yapıp $ npm install komutunu yazıyorum.
2. Styled Components Kurulumu
Yeni oluşturmuş olduğumuz react projemizde styled components kullanabilmemiz için projemize kurmuş olmamız gerekiyor.
$ npm install styled-components komutuyla projemize styled component kuruyoruz.
3. Component Oluşturma
Örnek bir uygulama yapabilmek adına oluşturmuş olduğum projeminsrc/components konumunda Title adında bir component oluşturuyorum. Title klasörü içerisinde ise bir adet index.js ve stilleri ayrı bir javascript dosyasında tutacağımdan için style.js dosyalarını oluşturuyorum.
Evet her şey hazır olduğuna göre artık kodlarımızı yazmaya başlayabiliriz. Öncelikle Title componentimizin index.js kodlarını yazalım.
Burada Title adında bir component ve bu componentin içinde text adında bir prop oluşturuyoruz. Bu text, TitleWrapper ile stilize edilmiş bir şekilde gösterilir.
Şimdi components/Title/style.js dosyasında TitleWrapper componentinin stillerini tanımlayalım:
Styled components kullanarak, bir h1 elementi için stil tanımlıyoruz. Bu stil, Title componentimizin görünümünü belirler.
Son olarak uygulamamızda yapmış olduğumuz örneği görebilmek için app.js dosyamızı düzenliyoruz.
Çok detaya girmeden en basit ve anlaşılır haliyle styled components kullanımını bu şekilde göstermiş oldum.
☕ Yazılarımı beğeniyorsanız ve daha fazlası için destek olmak isterseniz buradan bana kahve ısmarlayabilirsiniz.
Teşekkürler.
