Bu neden önemli?
Kodu giderek daha çok yapay zekâ yazıyor. Bu da 'hangi araç insan için rahat?' sorusunun yanına 'hangi araç yapay zekânın hata yapmasını zorlaştırır?' sorusunu ekliyor.
Facebook’un garip sınıf isimleri
Facebook’ta sağ tıklayıp “İncele” dersen, HTML elemanlarında anlamsız görünen onlarca sınıf adı görürsün. Birçok kişi bunun Tailwind benzeri bir sistem olduğunu sanıyor. Aslında bu, Meta’nın kendi geliştirdiği ve açık kaynak olarak paylaştığı StyleX aracının çıktısı.
StyleX nasıl çalışıyor?
- Stilleri CSS dosyasına değil, JavaScript nesneleri içine yazıyorsun: yazı boyutu, renk, boşluk gibi.
- Proje derlenirken (build) StyleX bütün stilleri tarıyor ve her özellik–değer ikilisi için tek bir küçük sınıf üretiyor. Örneğin “üst boşluk 0” için tek bir sınıf. Buna atomik CSS deniyor.
- Aynı stil binlerce yerde kullanılsa bile CSS dosyasına bir kez yazılıyor. StyleX’e göre bu sayede proje büyüdükçe CSS boyutu bir noktadan sonra artmayı bırakıyor.
- Her şey derleme sırasında hesaplandığı için tarayıcıda stilleri hesaplayan ekstra bir kod çalışmıyor.
- Aynı özelliği iki stil birden ayarlarsa kural basit: En son uygulanan kazanır. CSS’teki karmaşık öncelik (specificity) kavgaları yaşanmıyor.
Svelte ya da CSS Modules gibi yöntemler de rastgele sınıf adları üretir. Fark şu: Onlar bir bileşen için tek bir sınıf üretir. StyleX ise her özelliği ayrı bir sınıfa böler.
Neden şimdi popüler oldu?
Tailwind’i uzun süre kullanan Jared Palmer, Ağustos’ta şunu yazdı: Kodu elle yazarken Tailwind hâlâ daha iyi. Ama artık CSS’e neredeyse hiç elle dokunmadığı için, StyleX’in getirdiği kısıtlamaların yapay zekâ ajanlarıyla daha tutarlı ve doğru kod ürettiğine ikna olmuş. Linear’dan Adam Hutchinson da uygulamalarının yarısından fazlasını StyleX’e taşıdıklarını paylaştı.
Syntax’ta konuşulan başlıca artılar:
- Tip güvenliği: Stiller TypeScript ile kontrol ediliyor. Olmayan bir sınıfı kullanmaya çalışırsan hemen hata alırsın. Yapay zekâ “bu sınıf herhalde vardır” diye uyduramaz.
- Kısıtlama: Bir tasarım sisteminde neye izin verilip neye verilmeyeceğini tiplerle belirleyebilirsin. Ajan çizginin dışına kolayca çıkamaz.
- Bulunabilirlik: Bir stilin nerede tanımlandığına tek tıkla gidilebiliyor. Hem sen hem ajan kolayca bulur.
- Birleştirme kolaylığı: Stiller JavaScript nesnesi olduğu için birleştirmek ve üzerine yazmak çok doğal.
Eksileri de var
- Elle yazması zahmetli. Medya sorguları, iç içe seçiciler ve yeni CSS özellikleri nesne sözdizimiyle yazılınca uzun ve okunaksız olabiliyor. Scott Tolinski bölüm boyunca bu yüzden pek ikna olmadığını söylüyor.
- İç içe stil yazmak zor. Her eleman için ayrı stil tanımlaman gerekiyor.
Benzer fikirleri daha tanıdık bir yazımla sunan bir alternatif de var: Panda CSS. O da derleme sırasında çalışıyor ve tip güvenli, ama CSS’e daha yakın bir yazım biçimine de izin veriyor.
Düşün
- Bir aracı seçerken “benim için rahat mı” sorusu mu önemli, yoksa “hata yapmayı zorlaştırıyor mu” sorusu mu?
- Kodu çoğunlukla yapay zekâ yazıyorsa, okunabilirlik hâlâ önemli mi? Neden?
Bu yazıdaki araçlar Araç Kutusu'nda: Panda CSS, StyleX