CSS Özgüllükleri (Specificity)

CSS’te elementleri ID, sınıf atama ya da ebeveyn element yollarıyla tanımlayarak biçim atadığımızda o tanımın belli bir özgüllük değeri olur.
Mesela kafadan bir biçim sıfırlama (CSS reset) kodu ekleyecekseniz genellikle kısaca şu işinizi görür:

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

Burada HTML’de var olan olmayan tüm elementlerin tanımlarını sıfırlıyorsunuz. Ayrımcılık yok, sıfırlanmayan yok. Özgüllük de yok dolayısıyla. * yani evrensel seçicinin özgüllük seviyesini ifade edersek 0-0-0 oluyor.

Şimdi diyelim ki bir elementin etiketini yazacağım ve bu da paragraf etiketi olsun.

p {
	color: gray
	// Gri
}

Özgüllük seviyesi 0-0-1 oldu. Çünkü bir element tanımlandı. Düz mantık gidip ul > li ya da ul li yazarsak 0-0-2 oluyor.

Element tanımlamayı bıraktık gelsin sıra sınıflara.

.benozelim {
	color: red;
	// Kırmızı
}

Seviyemiz 0-1-0. Burada farkettiyseniz elementi tanıtmadık dolayısıyla ilk basamak boş kaldı. Ama onun yerine her elementte bulunmayacak daha ‘özel’ bir sınıf tanımında bulunduk. Bu özgüllük seviyesinde daha üst basamakta yer edeceğinden ikinci basamağın değeri artmış oluyor. Biçimlendirme yaparken sınıf vermeyip onun yerine yalancı (pseudo, :only-of-type gibi) sınıf ya da nitelik (attribute, *[type:checkbox] gibi) eklediniz, o vakit her bir örnekte de aynı seviyenin sonucunu alırsınız. Sınıf, nitelik ve yalancı sınıfın özgüllüğü eşittir kısacası.

Bir üst basamaksa ID’lerin hüküm sürdüğü değerler.

#bendahaozelim {
	color: yellow;
	// Sarı
}

Seviye, 1-0-0.

O kadar CSS’ten örnek verdik şimdi her birini birleştirip HTML’den şöyle bir senaryo uygulayalım:

<p class="benozelim" id="bendahaozelim">
	Ben ne rengim?
</p>

Soruyu gördünüz, bu paragraf ne renk olur?

Tabi ki sarı.

Gri olamazdı çünkü bu paragrafın .benozelim adında sınıfı var. Ama bu sefer kırmızı da olmadı çünkü #bendahaozelim ID’si var. Kimin daha çok sözü geçerse biçimlendirme hakkı ona ait.

Tabi kimin sözünün geçip geçmemesi gibi senaryolarda farklı seçicilerin (p, .benozelim, #bendahaozelim) yalnızca aynı tanımda (color) bulunmasıyla oluşan bir şey. Bu demek değil ki, .benozelim’de color’dan başka tanımlar yazıldı ama bu #bendahaozelim’de yok diye o tanımlar biçimlenmez diye bir şey yok. (CSS zaten böyle çalışmaz da, kafa karışıklığını yoklamak amacıyla bunu dedim.) Tüm mesele aynı tanımın birden fazla seçici tarafından verilmesi ve hangisinin özgüllüğünün fazla olduğu. Bundan dolayı bu örnekleri ayarladım.

Bu kısmı anladıysanız şimdi vur deyip öldürme kısmına girelim.

Biz bu seviyeyi 3 basamak halinde vermiştik ya? Bu işin içine HTML’de yazdığımız satıriçi biçimlendirmeler (inline style) girerse o zaman yeni bir basamak daha ekleniyor.

1-0-0-0.

<p class="benozelim" id="bendahaozelim" style="color:green;">

Ahanda yeşil oldu.

Var mı daha arttıran? !important.

p {
	color: magenta !important;
}

Seviye: 1-0-0-0-1
Tüm paragraf dahil, p.benozelim#bendahaozelim bile magenta oldu.

O kadar tanımını yaptığımız sınıfların, ID’lerin, satıriçlerinin anlamının yitirdiği tek kelime, adı üstünde önemli. Ama dediğim gibi bunlar vur deyince öldüren şeyler, sadece acil durumda camı kırın.

Sıklıkla kendinizi !important kullanırken buluyorsanız belli ki özgüllük savaşının içerisindesiniz hemen o klavyeden uzaklaşın.

Şaka bir yana, CSS’te bir süre vakit öldürdükten sonra bazı durumlarda istediğiniz biçimlendirmeyi tarayıcınıza söz geçiremeyip, takılıp kaldığınızda demektir ki CSS’in özgüllük kurallarını aklınızda bulundurmanız gerek. Zaten bütün bu mantık hangi tanımın daha ayrıcalıklı olup olmadığı etrafında dönüyor. Projenizde buna göre hareket edip düzene ayak uydurursanız bir o kadar az !important’a ihtiyacınız olur. !important yapmayın da demiyoruz, illaha ki bir noktada bunu yapmak zorunda kalacaksınız, çünkü bu sadece acil durumlar için var.

Umarım bilgiler bir fayda sağlamıştır. Yazıdaki tanımlardan sonra özgüllük seviyelerini iyice pekiştirmeniz için yeni edindiğim güzel, yabancı bir kaynak vardı. Adresi oldukça bariz: cssspecificity.com