Kaskat: Kaynak ve Sıra

Basamaklandırma, birden fazla kural aynı öğedeki aynı özelliği hedeflediğinde hangi stil bildiriminin kazanacağını belirlemek için CSS'in kullandığı algoritmadır. Kaynağı, önem düzeyini, özgüllüğü ve kaynak sırasını dikkate alır.

CSS bildirimleri, öncelik sırasına göre üç kaynaktan gelir:

1. Kullanıcı aracısı stil sayfası — tarayıcı varsayılanları
2. Kullanıcı stil sayfası — kullanıcılar tarafından belirlenen özel stiller (erişilebilirlik)
3. Yazar stil sayfası — CSS dosyalarınız

Normal (önemli olmayan) bildirimlerde yazar stilleri kullanıcı stillerini, kullanıcı stilleri de kullanıcı aracısı stillerini geçersiz kılar. CSS'inizin tarayıcı varsayılanlarını geçersiz kılmasının nedeni budur.

!important eklemek, bu bildirim için kaynak sırasını tersine çevirir:

1. Kullanıcı aracısı !important
2. Kullanıcı !important — en yüksek öncelik (erişilebilirlik)
3. Yazar !important

Kullanıcı erişilebilirliği geçersiz kılmalarının (örneğin zorunlu renkler) yazar CSS'i tarafından geçersiz kılınamamasının nedeni budur.

Aynı kaynaktan gelen iki bildirim yarıştığında kazananı özgüllük belirler. Daha yüksek özgüllük kazanır; CSS'de hata ayıklarken geliştiricilerin ilk düşündüğü şey budur.

İki kural aynı özgüllüğe sahip olduğunda, stil sayfasında daha sonra görünen kazanır. Bu, "kaynak sırası" kuralıdır. @import bildirimlerinizin ve @keyframe bildirimlerinizin sırasının önemli olmasının nedeni budur.

CSS basamaklandırma katmanları (@layer), kaynak ile özgüllük arasına yeni bir basamak ekler. Katman sırası önceliği belirler ve daha sonraki bir katmandaki bildirim, özgüllükleri ne olursa olsun daha önceki bir katmandaki bildirimden üstün gelir.

Tam öncelik sırası (en yüksekten en düşüğe):

1. Kaynak + önem (!important kullanıcı, !important yazar)
2. Animasyon değerleri
3. CSS katmanları (daha sonraki katmanlar kazanır)
4. Özgüllük
5. Kaynak sırası
6. Geçiş değerleri

Kalıtım, basamaklandırmadan farklıdır. Miras alınan değerler, üst öğenin hesaplanmış stilinden gelir. Düşük özgüllüklü bir kuraldan gelseler bile doğrudan uygulanan herhangi bir değere yenilirler.

Daha özgül (varyant) stilleri stil sayfanızda temel stillerden sonra yerleştirin. Bileşen dosyalarının sıfırlama ve temel dosyalardan sonra içe aktarılmasının nedeni budur.

DevTools'un Stiller panelinde kurallar en yüksekten en düşük önceliğe doğru listelenir. Üzeri çizili kurallar basamaklandırmayı kaybetmiştir. Hata ayıklamak için bir kuralın üzerine gelerek kaynak dosyasını ve satır numarasını görebilirsiniz.

İki kural aynı özelliği aynı özgüllükle hedefliyor. Hangisi kazanır?

Basamaklandırma, stil çakışmalarını önce kaynak (yazar > kullanıcı > tarayıcı), ardından önem (!important sırayı tersine çevirir), sonra @layer sırası, özgüllük ve kaynak sırasını kullanarak çözer. Basamaklandırmayı anlamak, herhangi bir çakışmada hangi kuralın kazanacağını tam olarak öngörebileceğiniz anlamına gelir; artık tahmin yürütmeniz gerekmez.