# CSS Özgüleşmesi Nedir?
CSS özgüleşmesi, tarayıcıların belirli bir öğeye hangi özellik değerlerinin uygulanacağına karar vermek için kullandığı algoritmadır. Esasen tarayıcıya bir kuralın ne kadar "spesifik" olduğunu söyleyen matematiksel bir puandır.İki kuralın farklı özgüleşme düzeyleri varsa, yazıldıkları sıra ne olursa olsun yüksek ağırlığa sahip olan kazanır. Her ikisi de aynı ağırlığa sahipse, kaynak kodda en son bildirilen kazanır.# CSS Özgüleşmesi Nasıl Hesaplanır
Özgüleşme, genellikle (A, B, C) olarak ifade edilen üç sütunlu bir ağırlık oluşturan üç kategoriye dayalı olarak hesaplanır:- A Sütunu (ID): Benzersiz tanımlayıcıların sayısını sayar. Örnek:
#headerA sütununda 1 olarak sayılır. - B Sütunu (Sınıflar, Öznitelikler ve Sözde sınıflar): Tüm sınıfları (
.button), öznitelikleri ([type="text"]) ve sözde sınıfları (:hover) sayar. - C Sütunu (Öğeler ve Sözde öğeler): Tüm HTML öğelerini (
div,h1) ve sözde öğeleri (::before) sayar.
# Altın Kural: Sütunlar Arasında Taşma Yok
Özgüleşmesi (0,50,0) olan bir kural asla bir kural (1,0,0) kadar spesifik olmayacak. Tek bir ID sonsuz sayıda sınıfı yener. Sütunlar hiçbir zaman birbirinin içine taşmaz.
# BEM Mimarisi ile !important Sorunu
!important yönergesi özgüleşme kurallarının bir istisnasıdır. Kullanıldığında, bu bildirim otomatik olarak başka bir kuralı geçersiz kılar. Doğal kaskadı bozduğu için kötü bir uygulama olarak kabul edilir.Büyük projelerde özgüleşme savaşlarından kaçınmak için BEM gibi metodolojiler, özgüleşmeyi yapay olarak (0,1,0) düzeyinde tutmak için yalnızca tek derinlik sınıf seçicileri kullanmayı savunur.