CSS Kodlama Standartları
Büyük bir Drupal temasında CSS çok çabuk dağınqk bir yumağa dönüsebilir — bu yüzden component tabanlı bir yaklaşım (tek uzun bir cascading sayfa yerine küçük, kendi başına yeten parçalar) göründüğünden çok daha erken karşılığını veriyor.
1. Component Tabanlı Organizasyon
Stiller sayfaya göre değil component'e göre gruplanır, her biri kendi dosyasında: bir card.css, bir site-header.css, bir pager.css. Bir component'in dosyası yalnızca o component'i ve içindeki elementleri stiller — birkaç DOM seviyesi yukarıda ilgisiz bir şeyi stillemeye uzanmak, o stillerin başka bir yere ait olduğunu işaretidir.
css/
components/
card.css
site-header.css
pager.css
base/
elements.css
variables.css2. BEM Adlandırma
Class isimleri BEM'i izler: Block component'in kendisidir, Element onun bir parçasıdır ve çift alt çizgiyle birleştirilir, Modifier ise bir varyasyondur ve çift tireyle birleştirilir. İlişkiyi class isminde görebilmek, bir class'ın neye ait olduğunu anlamak için ikinci bir dosya açmaya hiç gerek bırakmaz.
/* ❌ Yanlış: class isimleri arasında görünür bir ilişki yok. */
.card {
}
.title {
}
.featured {
}
/* ✅ Doğru: BEM adlandırması ilişkiyi gösteriyor. */
.card {
}
.card__title {
}
.card--featured {
}3. Seçiciler
ID seçiciler stil için hiçbir zaman kullanılmaz — bir ID'nin özgüllüğü (specificity), sonraki override'ları zahmetli hale getirecek kadar yüksektir ve Drupal'ın kendi markup'ı da ID'leri zaten güvenilir bir bağlantı noktası olmaktan çıkaracak şekilde tekrar kullanabiliyor. Seçiciler sığ kalır, tercihen tek bir class, ve nesting nadiren iki ya da üç seviyeden fazla inmez.
/* ❌ Yanlış: bir ID seçici, ve gereksiz nesting. */
#sidebar .block .block-content ul li a {
color: blue;
}
/* ✅ Doğru: tek, sığ bir class seçici. */
.sidebar-block__link {
color: blue;
}!important tamamen kaçınılır — ona başvurmak neredeyse her zaman bu deklarasyonun zorla kazanması gerektiğinin değil, yukarıdaki bir seçicinin daha az özgül olması gerektiğinin işaretidir.
4. Biçimlendirme
Çoklu seçicili bir kuralda her seçici kendi satırında, her deklarasyon kendi satırında, açılış parantezinden önce bir boşluk ve her deklarasyondaki iki noktadan sonra bir boşluk olur. Hex renkler küçük harfle yazılır ve gerçekten daha kısa olduğu her yerde shorthand kullanılır.
/* ❌ Yanlış. */
.card,.card--featured{
color:#FFFFFF;background-color:#000000;
}
/* ✅ Doğru. */
.card,
.card--featured {
color: #fff;
background-color: #000;
}5. Stylelint
Drupal core'un Stylelint konfigürasyonu yukarıdaki kuralların çoğunu otomatik olarak kontrol eder — JavaScript için ESLint'in, PHP için PHP_CodeSniffer'ın üstlendiği rolün aynısı; bunu lokal olarak çalıştırmak biçimlendirme ve seçici sorunlarını bir code review'dan çok önce yakalar.