Perang spesifisitas adalah bug CSS paling umum. Reset CSS kalah dari Bootstrap, Bootstrap kalah dari utility class, utility class kalah dari !important. @layer memberimu kontrol eksplisit atas urutan cascade, terpisah dari spesifisitas.

@layer reset, framework, komponen, utility;

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

@layer framework {
  .btn { padding: 8px 16px; background: blue; color: white; }
}

@layer komponen {
  /* Meski selector .btn-card lebih kurang spesifik dari .btn,
     ia MENANG karena layer komponen lebih tinggi dari framework */
  .btn-card { background: green; }
}

@layer utility {
  .m-0 { margin: 0; }
}

Aturan:

1. Layer didefinisikan lebih dulu = prioritas lebih rendah. Layer terakhir menang.
2. Style tanpa layer selalu menang dari style di dalam layer.
3. !important di layer lebih awal justru melawan urutan normal — gunakan hati-hati.

Kapan pakai?

• Integrasi framework CSS (Bootstrap/Tailwind) tanpa harus spam !important.
• Memisahkan "CSS dari vendor library" vs "CSS milik tim sendiri".
• Eksperimen A/B atau override tema tanpa mengacak struktur seluruh stylesheet.

/* Import library ke layer terpisah */
@import url("bootstrap.css") layer(framework);

Dengan @layer, kamu bisa menulis selector yang tidak over-specific tanpa takut di-override oleh class yang tidak sengaja lebih kuat.

🎭 Analogi sehari-hari

Bayangin sekolah dengan tingkatan kelas: SD < SMP < SMA < kuliah. Apapun yang diajarin di SD, kalo nanti di SMA diajarin yang beda, yang berlaku tetap pelajaran SMA — gak peduli SD-nya udah hafal mati. Cascade layers gitu kerjanya: kamu set urutan tingkat (reset < framework < komponen < utility). Layer yang lebih tinggi ALWAYS menang dari layer rendah, gak peduli selector di layer rendah lebih spesifik kayak apa. Akhirnya kamu bisa pakai Bootstrap atau Tailwind tanpa harus spam !important buat override — tinggal taruh CSS kamu di layer yang lebih tinggi, beres.

⚠️ Jebakan yang sering ditemui

• Layer URUTAN definisi matters — yang dideklarasi BELAKANGAN = priority lebih tinggi.
• Style TANPA layer menang dari style dalam layer apapun — surprise.
• !important IN layer flips order — di layer rendah !important menang dari !important di layer tinggi. Otaknya kebalik.
• Anonymous layer (@layer { ... } tanpa nama) tidak bisa di-extend.
• @import url(...) layer(name) untuk wrap library ke layer.
• Browser support 2022+. Modern apps aman.
• DevTools sudah show layer info.

TL;DR: @layer = kontrol eksplisit urutan cascade, terpisah dari specificity. Layer didefinisi LEBIH AWAL = priority rendah; layer TERAKHIR menang. Style tanpa layer selalu menang dari style dalam layer manapun. Pakai untuk integrate framework (@import url(bootstrap.css) layer(framework)) tanpa !important spam. Pattern: @layer reset, framework, komponen, utility; lalu fill tiap layer. !important di layer rendah justru menang (otaknya kebalik). Browser support 2022+.