ITCSS: Ölçeklenebilir ve Erişilebilir CSS Mimarisi

[berat]

Büyük bir projede CSS ‘in ölçeklenebilir ve sürdürülebilir olması çok önemlidir. Eğer projenizde düzgün bir mimariyle yola çıkmazsanız !important ‘lar projede çoğalmaya başlar. Bu hızlı bir çözüm olsa da proje ilerledikçe tam bir baş belası oluyor.


Mimarisi iyi tasarlanmamış CSS projesi örneği
Bu sorunlar, özellikle çok sayıda geliştiricinin dahil olduğu büyük projelerde tekrarlanıyor. Bu sorunlar arttıkça projenin performansı ve kontrol edilebilirliği düşüyor. Yukarıdaki grafikte anlatılmak istenen de iç içe selectorler, id kullanımı ve !important kullanımının css specificity ‘sini nasıl arttırdığını göstermektedir.

Specificity nedir?
CSS’de specificity anlamı stil çatışması(aynı elemente birden fazla tanım yapılması) olduğunda kullanılan hangi kodun web tarayıcıları tarafından yorumlanacağını belirlemektir.

Tarayıcılar bu durumu hesaplarken yalnızca rakamları yan yana sıralar. Bu web tarayıcılarına özel bir aritmetik işlemdir. Bir örnek verecek olursak id değeri 2, class değeri 3 ve selector değeri 0 olan bir tanımlamada

0 (kod içinde değil), 2 (id), 3 (class), 0 (seçici) = 0230

Değerini elde ederiz. Burada id değeri 100’ler basamağına sınıf değeri 10’lar basamağına yazılarak hesaplama yapılır ve ikiyüz otuz değeri elde edilir.

Yani siz proje içerisinde id, important ifadelerini ne kadar çok kullanıyorsanız proje o kadar karmaşıklaşıyordur. Karmaşık projede kimse kod yazmak istemez. Bu yüzden projelere başlamadan mimarisini iyi düşünerek planlamak gerekir. Projenin CSS mimarisini çıkarırken kullanabileceğiniz bir düşünceden bahsedeceğim.

ITCSS (Inverted Triangle CSS) nedir?
ITCSS (Ters Üçgen CSS olarak çevrilebilir), özellikle Harry Roberts tarafından oluşturulan büyük projeler için uygun bir mimaridir. Ne bir kütüphane ne de bir frameworktür.

ITCSS bir düşünce şeklidir.

ITCSS sadece saf CSS ‘le yapılan bir düşünce değildir. SASS veya LESS gibi pre-processor ‘ler ile beraber de kullanılabilir. ITCSS sayesinde CSS özellikleriyle daha iyi bir şekilde başa çıkmanıza yardımcı olur.

ITCSS’nin temel ilkelerinden biri, CSS kodlarınızı , ters üçgenin şeklini alan birkaç bölüme ( katman olarak adlandırılır ) ayırmasıdır :


ITCSS katmanları
Bu katmanlar şöyledir:

Ayarlar (Settings)
Ayarlar, boyutlar, renkler ve yazı tipleri gibi tüm genel yapılandırmalarınıza ve değişkenlere değinir. Ayarlar yapılandırmanıza yardımcı olmak için kullanılmalı ve bu nedenle gerçek CSS kodu içermemelidir. Örnek:

$color-ui: #bada55;
$spacing-unit: 10px;

Araçlar (Tools)
Oluşturacağınız mimaride bir ön-işlemci (SASS, LESS) kullanırsanız, mixin ve fonksiyonların olması gereken yer burasıdır. Örneğin: medya sorguları, yazı tipi yüzleri, animasyonlar vb.

@mixin font-brand() {
font-family: “UI Font”, sans-serif;
font-weight: 400;
}

Genel (Generic)
Burada DOM’un her yerine uygulanacak düşük özgüllük stilleri olmalıdır. Bunlar arasında kutu boyutlandırma, sıfırlama, normalleştirme vb. Bu, saf CSS’yi kullanabileceğimiz ilk katman.

*,
*::before,
*::after {
box-sizing: border-box;
}

Elementler (Elements)
Elementler, tüm sınıflandırılmamış HTML etiketlerine değinir. Buradaki stiller başlıklar, bağlantılar ve listeler gibi belirli HTML etiketlerine uygulanır. Bu tip seçiciler kullandığımız son katmandır

ul {
list-style: square outside;
}

Ekstralar
ITCSS çok uyarlanabilir ve özelleştirilebilir olduğu için, istediğiniz gibi veya ölçeklendirmeniz gerektiğinde katman ekleyebilir ve kaldırabilirsiniz. Örneğin, belirli bir temaya ihtiyacınız varsa, components ve utilities arasında bir tema katmanı ekleyebilirsiniz.


ITCSS ile CSS specificity ‘sinin nasıl düzgün arttığını görebilirsiniz.
Sonuç
ITCSS ile, specificity yavaş yavaş artar ve belirli ihtiyaçlara göre özelleştirilebilir. Bu nedenle, CSS’nizin çok daha kolay ölçeklenmesine izin verir. Bu fikri cazip bulduysanız ve ona bağlı kalmak istiyorsanız, ekibinize ITCSS düşüncesini ısrarla anlatın. ITCSS sayesinde herkesin verimliliğini arttırabilirsiniz.

 

[Fendrix]

Teşekkürler.