Katmanları basamaklama (@layer CSS kuralı) Chromium 99, Firefox 97 ve Safari 15.4 Beta'da kullanıma sunuluyor. Stil özgünlüğü çakışmalarını önlemek için CSS dosyalarınızın daha açık bir şekilde denetlenmesini sağlarlar. Bu, özellikle büyük kod tabanları, tasarım sistemleri ve uygulamalarda üçüncü taraf stillerinin yönetimi için kullanışlıdır.
CSS'nize net bir katman eklemek, beklenmedik stil geçersiz kılmalarını önler ve daha iyi CSS mimarisini destekler.
CSS belirginliği ve basamak
CSS belirginliği, CSS'nin hangi öğelere hangi stillerin uygulanacağına karar verme yöntemidir. Kullanabileceğiniz farklı seçiciler, herhangi bir stil kuralının belirliliğini belirler. Örneğin, öğeler sınıflar veya özellikler kadar ayrıntılı değildir. Bunlar da kimliklerden daha az spesifiktir. Bu, CSS öğrenmenin temel bir parçasıdır.
Kullanıcılar, yanlışlıkla belirginliğin geçersiz kılınmasını önlemek için BEM gibi CSS adlandırma kurallarına başvurur. Her şeye tek bir sınıf adı verildiğinde her şey aynı belirlilik düzlemine yerleştirilir. Ancak, özellikle üçüncü taraf kod ve tasarım sistemleriyle çalışırken bu tarz düzenli stilleri korumak her zaman mümkün değildir.
Basamaklama katmanları bu sorunu çözmeyi amaçlar. CSS dönemine yeni bir katman ekler. Katmanlı stillerde, bir katmanın önceliği her zaman seçicinin özgünlüğüne göre önceliklidir.
Örneğin, .post a.link seçicisi .card a ile kıyaslandığında daha yüksek bir spesifikliğe sahiptir. Bir bağlantının stilini belirlemeye çalışıyorsanız kartın içinde, bir yayının içinde daha spesifik olan seçicinin uygulandığını görürsünüz.
@layer özelliğini kullanarak her birinin stil belirliliğini daha açık bir şekilde ifade edebilir ve tüm CSS'nizin aynı düzlemde olması durumunda doğruluk sayısal olarak daha düşük olsa bile kart bağlantınızın stillerinin yayın bağlantısının stillerini geçersiz kılmasını sağlayabilirsiniz. Bunun nedeni, basamaklama önceliğidir. Katmanlı stiller, yeni kademeli "uçaklar" oluşturuyor.
@layer iş başında
Bu örnekte, @layer kullanılarak basamaklı katmanların gücü gösterilmektedir. Gösterilen birkaç bağlantı vardır: Bunlardan bazıları ek sınıf adı içermeyen, biri .link sınıfı ve diğeri .pink sınıfı içeren. Ardından CSS aşağıdaki gibi base, typography ve utilities olmak üzere üç katman ekler:
@layer base {
a {
font-weight: 800;
color: red; /* ignored */
}
.link {
color: blue; /* ignored */
}
}
@layer typography {
a {
color: green; /* styles *all* links */
}
}
@layer utilities {
.pink {
color: hotpink; /* styles *all* .pink's */
}
}
Sonuç olarak tüm bağlantılar yeşil veya pembedir. Bunun nedeni şudur: .link, a üzerinde daha yüksek bir seçici düzeyi spesifikliğine sahipken a için daha yüksek önceliğe sahip @layer bir renk stili vardır. Yeşil kural, mavi kuraldan sonraki bir katmanda olduğunda a { color: green }, .link { color: blue } değerini geçersiz kılar.
Katman önceliği, öğe belirginliğini aşıyor.
Katmanları düzenleme
Katmanları, yukarıda gösterildiği gibi doğrudan sayfa üzerinde veya bir dosyanın üst kısmında düzenleyebilirsiniz.
Katman sırası, kodunuzda her katman adı ilk kez göründüğünde oluşturulur.
Bu durumda, aşağıdakini dosyanın en üstüne eklerseniz bağlantıların tümü kırmızı, .link sınıfındaki bağlantı ise mavi renkle gösterilir:
@layer utilities, typography, base;
Bunun nedeni, katman sırasının tersine çevrilerek yardımcı programların en başta ve tabandan sonra yerleştirilmesidir. Bu nedenle, base katmanındaki stil kuralları her zaman tipografi katmanındaki stil kurallarından daha yüksek bir kesinliğe sahip olur. Bu bağlantılar artık yeşil değil, kırmızı veya mavi bağlantılar olacaktır.
İçe aktarmaları düzenleme
@layer kullanmanın bir başka yolu da içe aktarma dosyalarını kullanmaktır. Bunu, stilleri içe aktarırken aşağıdaki örnekte olduğu gibi bir layer() işlevi kullanarak doğrudan yapabilirsiniz:
/* Base */
@import '../styles/base/normalize.css' layer(base); /* normalize or rest file */
@import '../styles/base/base.css' layer(base); /* body and base styles */
@import '../styles/base/theme.css' layer(theme); /* theme variables */
@import '../styles/base/typography.css' layer(theme); /* theme typography */
@import '../styles/base/utilities.css' layer(utilities); /* base utilities */
/* Layouts */
@import '../styles/components/post.css' layer(layouts); /* post layout */
/* Components */
@import '../styles/components/cards.css' layer(components); /* imports card */
@import '../styles/components/footer.css' layer(components); /* footer component */
Yukarıdaki kod snippet'i üç katmandan oluşur: base, layouts ve components. base dilindeki normalleştirme, tema ve tipografi dosyaları, layouts içinde post, cards ve footer içinde ise components dosyalarında. Dosya içe aktarıldığında, katmanlar katman işlevi kullanılarak somutlaştırılır. Alternatif bir yaklaşım, katmanlarınızı dosyanın üst kısmında düzenlemek ve içe aktarma işleminden önce bildirmektir:
@layer base,
theme,
layouts,
components,
utilities;
Katman adının ilk örneğinde zaten oluşturulduğu için stillerinizi @import uyguladığınız sıra, katman sırası için önemli değildir. Böylece endişelenmeniz gereken şeyler kalmaz. İçe aktarılan dosyaları belirli katmanlara ayarlamaya devam edebilirsiniz, ancak sıralama zaten oluşturulmuştur.
Katmanlar ve şelale
Şimdi bir adım geri gidelim ve daha geniş şelaleyle ilişkili olarak katmanların nerede kullanıldığına bakalım:
Öncelik sırası şu şekildedir:
- Kullanıcı Aracısı normal (en düşük öncelik)
- Yerel Kullanıcı @layer
- Yerel Kullanıcı normal
- Yazar: @layers
- Yazar normal
- Yazar !important
- Yazar @layer !important
- Yerel Kullanıcı !important
- Kullanıcı Aracısı !important** (en yüksek öncelik)
Burada @layer !important stillerinin ters çevrilmiş olduğunu fark edebilirsiniz. Katmanlı (normal) stillerden daha az spesifik olmak yerine daha yüksek önceliğe sahiptirler. Bunun nedeni, !important işlevinin basamaklarda çalışma şeklidir: Stil sayfanızdaki normal geçişleri bozar ve normal katman düzeyindeki kesinliği (öncelik) tersine çevirir.
İç içe yerleştirilmiş katmanlar
Katmanlar, diğer katmanlarla iç içe yerleştirilebilir. Aşağıdaki örnek, Miriam Suzanne'ın Cascade Katmanları açıklayıcısından alınmıştır:
@layer default {
p { max-width: 70ch; }
}
@layer framework {
@layer default {
p { margin-block: 0.75em; }
}
p { margin-bottom: 1em; }
}
Yukarıdaki kod snippet'inde, framework içine yerleştirilmiş default katmanının göstergesi olarak . kullanarak framework.default erişebilirsiniz. Bunu daha kısa bir biçimde de yazabilirsiniz:
@layer framework.default {
p { margin-block: 0.75em }
}
Ortaya çıkan katmanlar ve katman sırası şöyledir:
- varsayılan
framework.defaultframeworkkatmansız- katmansız
Dikkat edilecek noktalar
Basamaklama katmanları doğru şekilde kullanılırsa harika olabilir, ancak başka karışıklıklara ve beklenmedik sonuçlara da neden olabilir. Basamaklı katmanlarla çalışırken aşağıdakilere dikkat edin:
1. Kural: Kapsam oluşturmak için @layer kullanmayın
Basamaklama katmanları, kapsam belirlemeyi çözmez. @layer içeren bir CSS dosyanız varsa card.css deyin ve karttaki tüm bağlantıların stilini ayarlamak istiyorsanız aşağıdaki gibi stiller yazmayın:
a {
…
}
Bu işlem, dosyanızdaki tüm a etiketlerinin bu geçersiz kılmayı almasına neden olur. Stillerinizi doğru bir şekilde kapsama almak yine de önemlidir:
.card a {
…
}
2. Kural: Basamaklı katmanlar, katmanlı olmayan CSS'nin arkasında sıralanır
Katmanlı bir CSS dosyasının, katmanlı olmayan CSS'yi geçersiz kılmayacağını unutmayın. Bu bilinçli karar, katmanları mevcut kod tabanınızla daha mantıklı bir şekilde kullanıma sokmayı kolaylaştırmaktı. Örneğin bir reset.css dosyası kullanmak, iyi bir başlangıç noktasıdır ve basamaklamalı katmanlar için iyi bir kullanım alanı sağlar.
3. Kural: !important, basamak kesinliğini tersine çevirir
Katmanlı stiller genel olarak katmansız stillerden daha az spesifik olsa da !important kullanıldığında bu durum tersine çevrilir. Bir katmanda, !important kuralına sahip bildirimler, katmansız stillerden daha özeldir.
Bu durumda, !important stilleri özgünlüğünü tersine çevirir. Yukarıdaki diyagram bunu referans olarak gösterir: Yazar @layers, yazar normalinden daha az önceliğe sahiptir ve bu, author !important değerine göre daha az önceliğe sahiptir ve author @layer !important öğesinden daha az önceliğe sahiptir.
Birden çok katmanınız varsa !important içeren ilk katman !important önceliğine sahip olur ve en belirgin stil olur.
4. Kural: Ekleme noktalarını anlama
Katman sırası, kodunuzda her katman adının ilk kez göründüğü zaman oluşturulur. Bu nedenle, layer() öğelerini içe aktarıp ayarladıktan veya farklı bir @layer ifadesinden sonra @layer bildirimi koyarsanız yok sayılabilir. Sayfanın en altındaki stil kuralının basamaklı katmanlara uygulandığı CSS'den farklı olarak, sıralama başlangıçta belirlenir.
Bu öğe bir listede, katman bloğunda veya bir içe aktarmada olabilir. layer() ile bir içe aktarma listesinin ardından @layer koyarsanız hiçbir şey işe yaramaz. Dosyanın en üst kısmına yerleştirdiğinizde, katman sırasını ayarlayabilir ve mimari içindeki katmanları net bir şekilde görebilirsiniz.
5. Kural: Özelliğe dikkat edin
Basamaklı katmanlarda, daha az spesifik olan seçici daha spesifik bir katmandaysa daha az spesifik olan bir seçici (a gibi) daha spesifik bir seçiciyi (.link gibi) geçersiz kılar. Aşağıdakileri göz önünde bulundurun:
@layer utilities, components belirtilmişse layer(components) içindeki a öğesi, layer(utilities) içinde .pink öğesini geçersiz kılar. API'nin kasıtlı bir parçası olsa da bu durum beklemediğiniz takdirde kafa karıştırıcı ve can sıkıcı olabilir.
Bu nedenle, yardımcı program sınıfları yazıyorsanız bunları her zaman, onları geçersiz kılmak istediğiniz bileşenlerden daha üst düzey bir katman olarak ekleyin. "Rengi değiştirmek için kısa süre önce bu .pink sınıfını ekledim ve sınıf uygulanmıyor" diyebilirsiniz.
Basamak katmanları hakkında daha fazla bilgi
Basamaklı katmanlar hakkında daha fazla bilgi edinmek için şu kaynaklara da göz atabilirsiniz: