Cascade Layers

Semakin besar sebuah proyek, semakin sering dua aturan yang sama kuat berebut elemen yang sama: gaya dasar, komponen, tema, dan stylesheet pihak ketiga semuanya menulis selector class. Menaikkan specificity untuk menang satu konflik hanya memindahkan masalah ke konflik berikutnya. Cascade layers, ditulis dengan at-rule @layer , memberikan jalan keluar: kita menetapkan urutan prioritas antar-kelompok gaya secara eksplisit, terlepas dari specificity di dalamnya. Fitur ini merupakan Baseline sejak 2022 (Chrome 99, Firefox 97, Safari 15.4), jadi dapat dipakai lintas browser utama.

Mendeklarasikan Layer dan Urutan Prioritas #

Sebuah layer dideklarasikan dengan @layer, baik sebagai pernyataan nama maupun blok aturan. Urutan deklarasi menentukan prioritas: untuk deklarasi normal, layer yang dideklarasikan belakangan menang atas layer yang dideklarasikan lebih dulu. Pernyataan @layer dasar, komponen; di awal file telah mengunci urutan itu, meskipun isi kedua layer ditulis kemudian:

@layer dasar, komponen;

@layer dasar {
  .kartu-teks { color: rgb(21, 128, 61); }
}

@layer komponen {
  .kartu-teks { color: rgb(2, 132, 199); }
}

Pada elemen dengan class kartu-teks, kedua aturan sama-sama (0, 1, 0) dan keduanya cocok. Specificity tidak memutuskan karena keduanya sama kuat; yang memutuskan adalah layer: komponen dideklarasikan belakangan, sehingga biru yang tampil. Di dalam satu layer, aturan specificity dan source order bekerja seperti biasa.

Pola pemakaian yang umum: layer pertama untuk reset dan gaya dasar (prioritas terendah), layer berikutnya untuk komponen dan tema, sementara aturan penimpa sementara dapat dijadwalkan pada layer tersendiri tanpa menyentuh specificity.

Dua detail deklarasi melengkapi pengelolaannya. Nama layer yang dideklarasikan berulang menyatu: blok @layer dasar kedua menambah isi ke layer yang sama, dan urutan layer tidak berubah karena pernyataan pertama yang menguncinya. Layer juga dapat disarangkan — @layer komponen.tombol; mendeklarasikan layer tombol di dalam komponen — sehingga proyek besar dapat menata sub-prioritas per modul. Untuk keperluan chapter ini, layer tunggal tanpa sarang sudah cukup; nested layers kita simpan untuk kebutuhan lanjutan.

Unlayered Styles dan Pembalikan oleh !important #

Gaya yang ditulis di luar semua layer (unlayered) berdiri di posisi tertinggi untuk deklarasi normal: gaya unlayered menang atas seluruh layer. Ini bukan cacat desain, melainkan ruang kerja kita saat menimpa library: stylesheet pihak ketiga kita masukkan ke dalam layer, dan penimpaan kita ditulis tanpa layer sehingga selalu menang tanpa menaikkan specificity.

Untuk deklarasi !important, urutan layer terbalik: layer yang dideklarasikan pertama justru paling kuat, dan !important tanpa layer menjadi yang terlemah. Pembalikan ini menjaga gaya dasar penting — misalnya reset aksesibilitas di layer paling bawah — tetap dapat memenangkan kompetisi deklarasi penting.

File contoh-layer.css pada bundle chapter ini merangkum ketiga aturan tersebut:

@layer dasar, komponen;

@layer dasar {
  .kartu-teks {
    color: rgb(21, 128, 61);
  }
  .kartu-penting {
    color: rgb(220, 38, 38) !important;
  }
}

@layer komponen {
  .kartu-teks {
    color: rgb(2, 132, 199);
  }
  .kartu-penting {
    color: rgb(2, 132, 199) !important;
  }
}

/* Gaya unlayered: menang atas semua layer untuk deklarasi normal */
#sorotan .kartu-teks {
  color: rgb(220, 38, 38);
}

Demo: Tiga Aturan, Tiga Pemenang #

Demo chapter ini memakai file CSS di atas pada tiga elemen uji:

<div class="kartu">
  <p class="kartu-teks">Layer komponen menang atas dasar.</p>
  <div id="sorotan">
    <p class="kartu-teks">Gaya unlayered menang atas kedua layer.</p>
  </div>
  <p class="kartu-penting">!important membalik urutan layer.</p>
</div>

Hasil di Browser:

Paragraf pertama tampil biru (rgb(2, 132, 199)): di antara deklarasi normal,
layer komponen yang dideklarasikan belakangan menang atas dasar.
Paragraf kedua tampil merah (rgb(220, 38, 38)): aturan unlayered
#sorotan .kartu-teks menang atas seluruh layer.
Paragraf ketiga tampil merah (rgb(220, 38, 38)): dengan !important urutan
terbalik — layer dasar yang dideklarasikan pertama paling kuat.

Mari kita telaah ketiga hasil tersebut:

1. Paragraf pertama: dua aturan layer sama-sama (0, 1, 0). Urutan layer menggantikan source order sebagai penentu, sehingga komponen menang meskipun isi bloknya ditulis setelah pernyataan urutan.
2. Paragraf kedua: aturan unlayered (1, 1, 0) berada di atas semua layer untuk deklarasi normal. Merah menang tanpa perlu !important.
3. Paragraf ketiga: kedua layer menandai deklarasinya dengan !important. Urutan terbalik membuat dasar — layer pertama — menang atas komponen, meskipun untuk deklarasi normal dasar justru yang terlemah.

Demo lengkap membawa data-expected pada ketiga paragraf dan memverifikasi warna pemenang secara otomatis. Dengan cascade layers di tangan, seluruh alat penyelesaian konflik telah lengkap — Chapter Mengatasi Conflicting Styles merangkumnya menjadi prosedur diagnosis yang siap dipakai.

@layer dasar, komponen;

@layer dasar {
  .kartu-teks {
    color: rgb(21, 128, 61);
  }
  .kartu-penting {
    color: rgb(220, 38, 38) !important;
  }
}

@layer komponen {
  .kartu-teks {
    color: rgb(2, 132, 199);
  }
  .kartu-penting {
    color: rgb(2, 132, 199) !important;
  }
}

/* Gaya unlayered: menang atas semua layer untuk deklarasi normal */
#sorotan .kartu-teks {
  color: rgb(220, 38, 38);
}