CSS in JS
CSS in JS konusunda kendimi geliştirmek istiyorum fakat tam olarak nereden ve nasıl başlayacağımı kestiremiyorum. Bir çok farklı framework var. Hepsi içinde öğretici videolar var fakat bunların içinden hangisini seçmeliyim neye göre gitmeliyim ?
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (2)
CSS-in-JS özellikle son dönemlerde çok popüler.Dünyaca ünlü firmalar(Reddit, GitHub vb.) bile tercih ediyor. Bunun nedeni ise birçok avantajı olması ve özellikle React geliştiricilerinin kullanması.
Birkaç avantajı şöyle:
- Ölü kodu ortadan kaldırıyor. Sadece gerekli olan stilleri kullanıyor. Kullanmadığın zaman siliyor.
- Kapsam belirmeme. Bazen bir bileşende farklı stiller kullanmak isteriz ve bu stillerin sadece bu bileşene özgü olmasını isteriz. Kapsam belirleme(scoping) ile bunu yapmak çok basit.
- Tasarım sistemi dostu. Bileşenlerle birlikte oldukça uyumlu kullanabilirsin. Özellikle React'da bu eksikliği gidermek için de birebir.
- Geliştiriciler için çok rahat. Her şeyin aynı yerde olması epey rahatlık sağlıyor. Ayrıca scoping kullanarak diğer stilleri bozmayacağımız için gözümüzü korkutmuyor. Ortak proje yaparken şu şunu etkiler mi diye endişelenmiyorsunuz.
- CSS'in içerisinde JS kullanma rahatlığı. Mantıksal operatörleri vb. sass ile kullanmak yerine direkt js ile de kullanabiliriz.
CSS-in-JS kimler için:
- Bileşenleri (component) olan bir web sitesi kullanmak istiyorsanız iyi bir seçimdir. Ortak projelerde rahatlıkla kullanılır.
CSS-in-JS vanillaJs ve React'da kullanılıyor. Vue'de zaten single file template yapısı var. Angular'da da component styles yapısı var. Svelte'de de benzer şekilde single file template yapısı var.
Kullanımı zor değil. Dökümanları çok iyi. Zaten Js bilgin varsa rahatlıkla yaparsın. Yoksa da js öğrenmen lazım zaten.
VanillaJs için aşağıdaki arkadaşın da belirttiği gibi bu arkadaşın yaptığı Vanilla Extract var. Zero-runtime vadediyor ve typescript tabanlı.
React için de şunu kullanabilirsin.
Buradan da güzel bir örneğe ulaşabilirsin.
Eğer CSS-in-JS kütüphanelerini karşılaştırmak istiyorsan buraya bakabilirsin.
Kişisel Fikrim
Eğer ben yeni bir framework öğrenmek istemiyorum diyorsan CSS-in-JS'e bakabilirsin ama büyük bir proje yapacaksan bence Vue kullan.
CSS in Js ile ilgili ilk çıkanlar benim bildiğim kadarıyla,
- CSS Modules
- Styled Component (React için)
bu yukarıdaki ikisi bence yeterli olur.
Aşağida bıraktığım linkler gibi çok sayıda alternatif çıktı ve gün geçtikçe sayıparı artıyor ne yazık ki :) Çok da takılmamanı öneririm. Mantığını anlasan yeterli.