STYLING
Atomic CSS Nedir?
Bootstrap, Bulma, Tailwind, WindiCSS türevi utility kütüphaneleri ile ilgimi çeken bir konu. Bu yazıda Atomic CSS üzerinde duracağım.
Styling konusunda önceki yazılarımda Büyük Web Uygulamalarında Ölçeklenebilir Styling bu Tailwind türevi yöntemlerden bahsetmiştim. Bu yazıda konuya biraz daha derinlemesine inceleyerek TailwindCSS temelini oluşturan AtomicCSS konusundan biraz bahsedip, bulduğum referans linklerini paylaşacağım.
Styling anlamında geleneksel yöntem ile TailwindCSS karşılaştırırsak.
Geleneksel yöntemde biz sınıflara mantıksal sınıf isimleri verip bunların css, less ve sass gibi dosyalar içerisinde çözmeye çalışırız. Tabi bileşen sayısı arttıkça bu stil dosyalarını yönetmek aynı yaklaşımların başka bileşenlerde olması ve bunları tekrar etmesi sorunlarını aşmakta bir takım zorluklar yaşayabiliriz.
Atomic CSS ise önceden tanımlanmış p-6, flex-shrink-0 veya text-gray-500 gibi CSS mantıksal soyutlamanın peşindedir. Bu sayede HTML içerisinde class tanımlarına bu mantıksal yapıların eklenerek anlaşılır ve sınırlandırılmış şekilde kullanılmasını hedefler. Örneğin bir opacity değeri tanımlarken 0 ile 1 arasında 1000 lerde değer kullanabilirsiniz ama bu yapı magic(gizli anlaşılmaz) sayılar ile değil aşağıdaki gibi daha analog seçimler ile bizi kısıtlayarak çalışmaya zorlar. Tabiki bunun avantajı reusability(tekrar kullanılabilirliktir.)
Bu yaklaşım aslında yıllardır kullandığımız Bootstrap ve Faundation, Bulma benzeri CSS Framework içerisinde de yer alan özelliklerdir.
Zaman içerisinde React, Vue, Angular, Svelte gibi UI frameworkleri ile birlikte bileşen oluşturma ve kullanma yaklaşımlar kütüphanelere dönüşünce landing ve statik sayfalar haricinde pek sık kullanılmaz oldu. Bunun yerine MeterialUI, AntUI, SemanticUI, ChakraUI gibi bileşen kütüphaneleri daha aktif yer almaya başladı. Sonradan çıkan TailwindCSS ile Atomic CSS → konusu tekrardan canlandı ve bunun türevleri olan başka kütüphanelerde çıkmaya başladı. Örneğin WindiCSS
Inline Styling yöntemleri ile JS in CSS (Emotion ve Style In Components) bu seviyenin biraz daha altında bir yaklaşım sağlar. CSS direk JS içerisinde yazmaya yönelik olduğu için tam Atomic CSS diyemeyiz ama Twin.macro veya benzeri yaklaşımlar JSS kavramında da Atomic CSS soyutlama seviyesine çekebiliriz.
Bu yaklaşım konusunda iyi ve kötü değerlendirmeler bulunuyor. Ben bulabildiğim tüm kaynakları aşağıdaki referanslar bölümüne ekliyor olacağım.
Referanslar
Destekleyen Görüşler
Karşıt Görüşler
- The problem with atomic CSS
- Atomic CSS Karşıt düşünce MaintanableCSS Bende bu fikirlere katılıyorum. Ama tasarımcınız yok ise hiç CSS bilginiz yok Tailwind gibi araçlar size büyük bir avantaj sağlar.
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara (React UI Styling) erişmek için bu linke tıklayabilirsiniz.
