Her ön yüz geliştiricisinin kabusu aynıdır: mükemmel yazılmış bir bileşenin stillerinin, üçüncü taraf bir kütüphanenin tek satırıyla ezilmesi. Yıllarca bu savaşı !important rampalarıyla yönettik. @layer ile gelen Cascade Layers ise kazananı özgüllük değil, katman sırası belirleyerek bu dengeleri altüst ediyor. Değişim o kadar köklü ki, stil mimarisini artık seçici yazmadan önce düşünmeye başladık.

Özgüllükten Güçlü Bir Kural

Dilimizin en az bilinen gerçeği şu: cascade'de katman sırası, seçici özgüllüğünden önce gelir. Yani tek sınıflı bir seçici, dokuz sınıflı bir seçiciyi katmanı daha "önde" olduğu sürece yener:

@layer tasiyici, temel, bilesenler;

@layer bilesenler {
  /* tek sınıfa rağmen kazanır, cunku katmani daha sonra gelir */
  .buton { padding: 0.75rem 1.5rem; border-radius: 999px; }
}

@layer temel {
  /* on sinif eklemek kurtarmaz: bu katman once geldi */
  #panel .form .buton.ana.birincil { padding: 4px; }
}

Aynı mantığın tersi de işler: !important kullanıldığında katman sırası tersine döner, yani en alttaki katmanın önemli bildirimi en güçlü olur. Bu ayrıntı, üçüncü parti bir reseti ezmek isteyen özel temalar için hayat kurtarıcıdır. Bir kütüphaneyi en düşük katmana alıp kendi kodunuzu üstüne koymak ise !important duvarlarını tek gecede tarihe gömer; kod yalınlaşır, niyet açığa çıkar.

Katmanların görünürlüğü de pratikte önemlidir: tanımlanmamış bir katmana stil eklemek, o katmanı ilk yazan satırda yaratır ve sıralamayı sessizce bozar. Bu yüzden ekipler katman listesini tek bir giriş dosyasında, en üstte tutmayı tercih eder; böylece sıra bir kod inceleme satırında görünür ve "bu stil neden bende çalışmıyor" sorusu bir editör aramasıyla yanıtlanır.

Pratik Bir Katman Düzeni

Kurumsal bir projede tercih ettiğim iskelet şu: reset en altta, üçüncü taraf kütüphanelerin üstünde, kendi bileşenlerimiz en üstte. Böylece "kütüphane stillerini ezmek" bir hiyerarşi kararı hâline gelir:

@import url("bootstrap-min.css") layer(ucuncu-taraf);

@layer reset, ucuncu-taraf, temel, bilesenler, yardimci;

@layer yardimci {
  .ekran-okuyucu-gecici {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
}

Bu düzende üçüncü taraf güncellemeleri hiçbir zaman kendi sınıflarınızı ezemez; çünkü hangi katmanın kazandığı artık spesifikasyonun, sürüm numarasının değil. Ekip içi kod incelemelerinde "bu neden ezildi" tartışmaları da somut bir katman satırına işaret eder hâle gelir.

Geçişin Pusulası

Mevcut bir kod tabanını katmanlara bölmek bir hafta sonu projesi olabilir: önce yalnızca isimleri tanımlanmış boş katmanları depoya işleyin, sonra çakışan modülleri tek tek taşıyın; her taşımanın ardından görsel regresyon testini çalıştırın. Üçüncü parti kütüphaneleri de unutmayın; hepsi import edilebilir katmanla gelmese bile layer() işlevi onları istediğiniz katmana yerleştirir. @layer tek başına bir mimari değildir; ama iyi bir mimarinin CSS'teki en keskin aletidir. Sıralamayı siz belirlediğiniz gün, stil çakışması bir savaştan çıkıp öngörülebilir bir kurguya dönüşür; kod incelemelerinde de "hangi katmanda" sorusu, "neden bu kadar önemli" sorusunun yerini alır. Katman sıralamasını bir kez çizince, stil borcunun nerede biriktiğini de görmüş olursunuz.