Setiap stylesheet pada akhirnya mengembangkan monster: aturan yang menang hanya karena aturan tersebut muncul terakhir dengan tiga ID dan satu ID penting. Lapisan bertingkat menggantikan cerita rakyat itu dengan urutan yang Anda tulis satu kali.

@layer reset, base, components, utilities;

@layer base {
  a { text-decoration-thickness: from-font; }
}
@layer components {
  .card a { text-decoration: none; }
}
@layer utilities {
  .link-plain { text-decoration: none; }
}

Tiga aturan yang penting

  • Urutan lapisan dideklarasikan satu kali, pertama: reset, lalu basis, lalu komponen, lalu utilitas. Lapisan selanjutnya menang terlepas dari kekhususannya.
  • Gaya yang tidak berlapis mengalahkan semua yang berlapis, jadi pengaturan ulang pada suatu lapisan tidak akan pernah dapat menimpa komponen di luarnya.
  • Hubungan !important terbalik: gaya-gaya penting di lapisan sebelumnya mengalahkan gaya-gaya penting di lapisan-lapisan berikutnya, yang merupakan cara perpustakaan-reset bertahan dalam utilitas Anda.

Adopsi di situs yang sudah ada

  1. Deklarasikan urutan dalam satu baris di bagian atas stylesheet entri Anda; belum ada yang bergerak.
  2. Impor setiap file yang ada ke dalam satu lapisan: kode vendor ke lapisan bawah, kode Anda sendiri di atasnya.
  3. Cari aturan penting yang tersisa dan pindahkan ke lapisan yang membuatnya tidak diperlukan; setiap yang dihapus adalah bug yang tidak akan pernah Anda debug lagi.
  4. Gaya tanpa lapisan sama sekali tetap unggul, jadi gunakan itu sebagai area pementasan Anda selama migrasi, lalu lapisi setelahnya.

Lapisan dikirimkan ke mana pun secara modern, dan mode kegagalan di luar dukungan tidak berbahaya: file mengalir dengan cara lama. Situs ini bersandar pada semangatnya dengan stylesheet pendek dan tanpa tumpukan utilitas, tetapi untuk proyek apa pun yang memuat dua kerangka kerja dan temanya sendiri, lapisan adalah peningkatan yang tenang, dan bantuan debugging sangat gacor.