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.
![Kullanıcı arayüzü oluşturma konulu proje demosundan görsel](https://developer.chrome.com/static/blog/cascade-layers/image/illustration-project-dem-6beee9cc7a3bf.jpeg?authuser=5&hl=tr)
@layer
iş başında
![İçe aktarma işlemleriyle bağlantı renklerini gösteren demo](https://developer.chrome.com/static/blog/cascade-layers/image/demo-showing-link-colors-da82477f07603.png?authuser=5&hl=tr)
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.
![Codepen Projesinin Ekran Görüntüsü](https://developer.chrome.com/static/blog/cascade-layers/image/screenshot-codepen-proje-91c531726cd5d.png?authuser=5&hl=tr)
İç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.
![Codepen Projesi'nden ekran görüntüsü](https://developer.chrome.com/static/blog/cascade-layers/image/screenshot-codepen-proje-2ee87a6895eab.png?authuser=5&hl=tr)
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.default
framework
katmansı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: