Cascade berlapis dengan @layer

At-rule @layer membentuk cascade layer, yaitu lapisan bernama yang mengatur urutan kekuatan antar kelompok aturan secara eksplisit. Dengan layer, urutan sumber yang selama ini ditentukan oleh letak aturan dapat dinyatakan sekaligus untuk seluruh kelompok. Topik ini membahas deklarasi urutan layer, kedudukan layer terhadap specificity dan aturan di luar layer, pengimporan stylesheet ke dalam layer, serta pemanfaatan cascade layer untuk menata gaya yang berdampingan dengan pustaka pihak ketiga.

Urutan sumber pada skala besar#

Pada mekanisme cascade, aturan dengan bobot sama diselesaikan oleh urutan sumber, yaitu aturan yang ditulis lebih akhir menjadi pemenang. Mekanisme urutan sumber bekerja baik pada satu berkas kecil, tetapi menjadi rapuh pada proyek besar. Stylesheet proyek nyata memuat reset, gaya dasar, komponen, dan utilitas yang tersebar di beberapa berkas, ditambah CSS dari pustaka yang urutan muatnya bergantung pada tag link.

Apabila proyek hanya mengandalkan urutan sumber, pemenang konflik ditentukan oleh urutan pemuatan berkas yang mudah berubah tanpa disadari. Memindahkan satu tag link atau menambah satu berkas baru dapat mengubah tampilan halaman yang tidak disentuh. Penanda !important sering digunakan untuk menutup konflik semacam ini, dan kebiasaan itu menular ke seluruh stylesheet.

Cascade layer menyelesaikan persoalan tersebut dengan mengangkat urutan sumber dari tingkat aturan ke tingkat kelompok. Kelompok aturan diberi nama, urutan kekuatannya dideklarasikan sekali, dan anggota kelompok dapat ditambahkan dari berkas mana pun tanpa mengubah urutan tersebut. Urutan menjadi keputusan rancangan yang tertulis, bukan kebetulan letak berkas.

Mendeklarasikan urutan layer#

Urutan layer dideklarasikan dengan at-rule @layer yang diikuti daftar nama, dan layer yang disebut lebih dulu memiliki kekuatan lebih rendah. Isi layer ditulis di dalam blok @layer dengan nama yang sama, dan blok berikutnya untuk nama yang sama menambahkan aturan ke layer tersebut. Aturan yang ditulis di luar layer mana pun berada pada kedudukan tertinggi dan mengalahkan seluruh aturan berlayer.

@layer reset, dasar, komponen, utilitas;

@layer reset {
  * {
    margin: 0;
  }
}

@layer dasar {
  p {
    margin-bottom: 1rem;
  }
}

Pada contoh di atas, layer reset adalah yang terlemah dan layer utilitas adalah yang terkuat di antara keempatnya. Deklarasi * { margin: 0 } pada layer reset tidak akan pernah mengalahkan aturan margin pada layer dasar, meskipun bloknya ditulis lebih akhir. Pembagian reset, dasar, komponen, dan utilitas merupakan pola yang lazim karena urutannya mengikuti tingkat keumuman gaya.

Nama layer bebas dipilih karena hanya berupa penanda urutan di dalam proyek. Layer yang belum diisi pun dapat didaftarkan terlebih dahulu untuk mengunci urutannya, sehingga berkas lain cukup menambahkan isinya dengan nama yang sama. Pendekatan ini menjadikan kerangka urutan tersedia sejak berkas pertama dimuat.

Kekuatan layer di atas specificity#

Urutan layer berada di atas specificity dalam urutan penyelesaian cascade. Konflik antar layer diselesaikan murni oleh urutan layer, sedangkan specificity hanya berperan apabila dua deklarasi yang bersaing berada pada layer yang sama. Akibatnya, selector sederhana pada layer berikutnya mengalahkan selector berbobot tinggi pada layer sebelumnya.

@layer dasar, komponen;

@layer dasar {
  #sambutan {
    color: #0f172a;
  }
}

@layer komponen {
  p {
    color: #1d4ed8;
  }
}

Deklarasi pada selector p memenangkan konflik di atas meskipun bobotnya jauh di bawah #sambutan, karena layer komponen berada setelah layer dasar. Perilaku ini membalik kebiasaan lama yang menaikkan bobot selector demi memenangkan konflik. Dengan layer, kekuatan ditetapkan pada kelompoknya, sehingga selector tetap dapat ditulis sederhana.

Diagram berikut merangkum kedudukan tersebut. Aturan di luar layer menempati posisi terkuat, diikuti layer yang dideklarasikan paling akhir hingga yang paling awal. Kekuatan itu berlaku untuk deklarasi normal, sedangkan penanda !important membalik urutan layer dengan aturan tersendiri yang dijabarkan pada spesifikasinya.

Mengimpor stylesheet ke dalam layer#

Stylesheet eksternal dapat dimasukkan ke dalam sebuah layer melalui at-rule @import dengan kata kunci layer(). Bentuknya @import url("reset.css") layer(reset); dan seluruh aturan pada berkas yang diimpor menjadi anggota layer tersebut. Aturan import harus ditulis sebelum aturan lain pada berkasnya, sebagaimana ketentuan @import pada umumnya.

Kemampuan ini penting karena isi berkas pihak ketiga tidak perlu disunting untuk dikelompokkan. CSS pustaka yang dimuat dengan import dapat langsung ditempatkan pada layer bernama pustaka, sedangkan urutan layer yang dideklarasikan menentukan kedudukannya terhadap gaya proyek. Satu layer juga dapat menerima isi dari beberapa berkas dengan mengulang import ke nama layer yang sama. Nama layer pada import tidak harus didaftarkan lebih dulu, tetapi mendaftarkannya membuat urutan keseluruhan tetap terbaca di satu tempat.

Menyelesaikan konflik dengan pustaka pihak ketiga#

Konflik klasik antara gaya proyek dan CSS pustaka diselesaikan cascade layer tanpa penanda !important. Apabila CSS pustaka ditempatkan pada layer bernama pustaka dan gaya proyek ditulis di luar layer, gaya proyek menang pada setiap konflik karena aturan di luar layer paling kuat. Penggantian gaya pustaka pun tidak lagi memerlukan selector yang dipanjangkan. Pola yang sama berlaku pada reset yang dibeli dari luar, yaitu pustaka masuk layer reset di urutan pertama, sedangkan gaya proyek tetap berada di luar atau di layer yang lebih akhir.

@import url("pustaka.css") layer(pustaka);

.tombol {
  border-radius: 6px;
}

Pada contoh di atas, deklarasi .tombol di luar layer mengalahkan aturan .tombol apa pun yang berada di dalam layer pustaka, tanpa memandang specificity-nya. Pola ini membalik situasi lama di mana gaya pustaka yang dimuat paling akhir sulit digantikan. Penyusunan layer juga membuat keputusan itu tertulis di awal berkas, sehingga hubungan antara pustaka dan gaya proyek terbaca jelas.

Ringkasan#

• @layer mendeklarasikan urutan kekuatan antar kelompok aturan, dengan layer yang disebut lebih dulu lebih lemah.
• Urutan layer berada di atas specificity, dan specificity hanya menyelesaikan konflik di dalam satu layer yang sama.
• Aturan di luar layer mengalahkan seluruh aturan berlayer, sedangkan @import dapat memasukkan berkas eksternal ke layer tertentu.
• Menempatkan CSS pustaka pada layer menjadikan gaya proyek menang tanpa penanda !important.

Referensi#

• @layer — MDN — Dokumentasi resmi at-rule @layer beserta bentuk deklarasi dan bloknya.
• Cascade layers — MDN — Materi pembelajaran resmi tentang urutan layer dan hubungannya dengan specificity.