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

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.

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 :

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;
}

Nesneler (Objects)
Nesneler OOCSS (Object Oriented CSS) prensiplerini takip eder. UI bileşiminde kullanılabilecek estetik olmayan küçük ve yeniden kullanılabilir parçalar. Örnekler; listeler, butonlar, inputlar vb. için uygulanacak wrappers (sarmalayıcılar), grids (ızgaralar), skins (kaplamalar). Başka bir deyişle: kullanıcı arayüzünüzde tekrarlanan herhangi bir desen potansiyel bir nesne adayıdır. ITCSS yazarı, bu katman için şöyle diyor :

No cosmetics. Agnostically named (e.g. .ui-list).

.ui-list {
margin: 0;
padding: 0;
list-style: none;
}

Bileşenler (Components)
Bu katmanda, yazarın dediği gibi, birden fazla noktada tekrar kullanılabilen (veya tek bir noktaya uygulanabilecek) iyi tasarlanmış UI parçalarına sahip olmanız gerekir. Ayrıca, sınıflar açıkça adlandırılmalıdır:

.products-list {
@include font-brand();
border-top: 1px solid $color-ui;
}
.products-list__item {
border-bottom: 1px solid $color-ui;
}

Yani, nesneler ve bileşenler arasında temel bir fark var. Nesneler estetik olmayan UI’nin jenerik, soyut parçalarına değinirken, bileşenler yeniden kullanılabilirlik ve iyi tanımlanmış estetiği hedef alan daha spesifik bir tabakadır.

Araçlar (Utilities)
Burada, DOM’un tek parçalarını etkileyen, .hidden, .relative, .one-half vb. overrides (üstüne yazmaki geçersiz kılmak), helpers (yardımcılar) ve belirli sınıflar olabilir.

Diğer katmanlardan gelen ayarları geçersiz kılmamız gerektiğinden, !important ‘a izin verildiği tek yer burası.

.one-half {
width: 50% !important;
}

Ancak, dikkatli olun ve bu katmanın sınırlardan büyümesine izin vermeyin! Buna tutarlı sınıflar eklemeye çalışın ve stilleri !important etmekten kaçının!

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.

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.