Kalau dua aturan CSS mengatur hal yang sama di elemen yang sama, browser harus memilih satu. Biasanya yang menang selector yang lebih spesifik (specificity: #id lebih kuat dari .class, .class lebih kuat dari nama tag), dan kalau sama kuat, yang ditulis paling bawah. @layer menambah satu tingkat di atas itu: kamu kelompokkan CSS ke beberapa lapisan (layer), lalu kamu sendiri yang menentukan lapisan mana yang menang.
🧪 Tebakan cepat: aturan dengan selector
#beliada di layer awal, aturan dengan.tombolada di layer terakhir. Mana yang menang? Tebak dulu, jawabannya ada di bagian "Urutan layer mengalahkan specificity".
Tiga layer buat satu tombol
<button id="beli" class="tombol">Beli</button>
<style>
@layer reset, theme, components;
@layer reset {
button { background: none; border: none; }
}
@layer theme {
button { background: navy; color: white; }
}
@layer components {
.tombol { background: green; }
}
</style>
@layer reset, theme, components;adalah daftar urutannya. Yang paling kiri paling lemah, yang paling kanan paling kuat.@layer reset { ... }adalah isi layerreset. CSS di dalamnya biasa saja, cuma dibungkus.backgrounddiatur di tiga layer.componentsada di urutan terakhir, jadigreenyang menang.colorcuma diatur ditheme, jadi tetapwhite.
Hasilnya tombol hijau dengan teks putih. Ganti baris pertama jadi @layer components, theme, reset; dan sekarang reset paling kuat, jadi tombolnya kehilangan background.
Urutan layer mengalahkan specificity
Misalnya di layer theme kamu tulis #beli { background: red; }. Selector id jauh lebih spesifik dari .tombol, tapi tombolnya tetap hijau, karena components ada di urutan lebih akhir. Jawaban tebakan: .tombol yang menang.
Antar layer, yang dilihat cuma urutannya. Specificity baru dipakai buat dua aturan di dalam layer yang sama. Itulah gunanya @layer: kamu bisa menang tanpa harus menulis selector yang makin panjang.
CSS tanpa layer menang dari semua layer
Aturan yang ditulis di luar @layer mana pun mengalahkan semua aturan di dalam layer, berapa pun specificity-nya. Kalau di bawah tadi ada button { background: orange; } tanpa layer, tombolnya jadi oranye, walau .tombol di components lebih spesifik.
⚠️ Jebakan yang sering ketemu
- Lupa ada CSS tanpa layer. CSS lama di luar layer diam-diam menang. Kamu ubah isi layer, tapi tampilannya gak berubah.
- Salah ketik nama layer.
@layer component { }(tanpa s) bikin layer baru. Layer baru ditaruh di ujung urutan, jadi malah jadi yang paling kuat. - Gak menulis daftar urutan. Tanpa baris
@layer a, b, c;di atas, urutannya mengikuti kapan tiap nama layer pertama kali muncul di file.
💡 Library juga bisa dimasukkan ke layer.
@import url("library.css") layer(vendor);menaruh seluruh CSS library di layervendor. Taruhvendordi awal daftar urutan, dan CSS kamu menang tanpa!important.
TL;DR: @layer mengelompokkan CSS ke beberapa lapisan. Baris @layer reset, theme, components; menentukan urutannya: layer terakhir menang, berapa pun specificity selector di layer sebelumnya. Specificity cuma dipakai di dalam satu layer. CSS di luar layer mengalahkan semua layer.
