Cascade Layers

Teori cascade layers — urutan deklarasi layer, kedudukan gaya unlayered, dan pembalikan oleh !important — telah kita bedah pada Chapter Cascade Layers di section cascade. Chapter ini memakai teori tersebut untuk satu pekerjaan konkret: menata stylesheet proyek nyata ke dalam layer yang urutannya dirancang, bukan tersisa dari kebiasaan menulis. Pola yang umum dipakai tiga layer berurutan — reset, base, components — dan menyisakan utilities di luar semua layer sehingga utility class selalu menang atas komponen tanpa perlu !important maupun specificity tinggi. Setelah chapter ini, kita dapat memulai stylesheet baru dengan kerangka yang siap tumbuh.

Kerangka Tiga Layer #

Deklarasikan urutan layer di baris paling atas stylesheet, sebelum satu pun aturan. Pernyataan tersebut mengunci prioritas: untuk deklarasi normal, layer yang dideklarasikan belakangan menang. File berikut adalah kerangka yang dipakai demo chapter ini:

@layer reset, base, components;

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

@layer base {
  .teks {
    color: rgb(71, 85, 105);
    line-height: 1.5;
  }
}

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

/* Utilities ditulis unlayered: menang atas seluruh layer */
.utilitas-merah {
  color: rgb(220, 38, 38);
}

Mari kita telaah strukturnya:

1. Baris 1 (@layer reset, base, components;): pernyataan urutan. Ia mendeklarasikan tiga nama layer sekaligus dan mengunci urutan prioritasnya meskipun isinya ditulis belakangan.
2. Layer reset: prioritas terendah. Isinya hanya normalisasi kasar seperti nol-kan margin dan padding bawaan browser.
3. Layer base: gaya default untuk pola teks dan komponen sebelum diubah — di sini .teks berwarna abu-abu.
4. Layer components: gaya komponen utama. .teks ditimpa menjadi biru; karena components dideklarasikan setelah base, aturan biru menang meskipun keduanya sama-sama (0, 1, 0).
5. .utilitas-merah (unlayered): gaya di luar semua layer berdiri paling tinggi untuk deklarasi normal, sehingga utility class ini menimpa komponen mana pun tanpa !important.

Urutan yang dirancang seperti ini juga berdampak pada kerja sehari-hari: aturan baru di layer components tidak pernah perlu “melawan” reset, dan penimpaan sesaat cukup memakai utility class.

Memasukkan File ke Layer dengan @import #

Kerangka ini baru terasa manfaatnya ketika stylesheet dipecah menjadi beberapa file. At-rule @import menerima parameter layer(...) yang memasukkan seluruh isi file yang diimpor ke layer tertentu:

@layer reset, base, components, vendor;

@import url("reset.css") layer(reset);
@import url("base.css") layer(base);
@import url("komponen.css") layer(components);
@import url("library-pihak-ketiga.css") layer(vendor);

Dengan pola di atas, stylesheet pihak ketiga yang tidak bisa kita edit tetap berada di layer vendor — prioritasnya di bawah components kita dan jauh di bawah utilities. Penimpaan terhadap library eksternal tidak lagi memerlukan peningkatan specificity; cukup tulis aturan pengganti di layer yang lebih tinggi. Perhatikan bahwa pernyataan @import wajib berada sebelum aturan lain di dalam file, sehingga peta layer seperti ini biasanya menjadi seluruh isi file utama proyek.

Nama layer tidak diatur spesifikasi — pilih nama yang menggambarkan perananya di proyek Anda dan gunakan secara konsisten, misalnya reset, base, components, vendor. Bila modul tumbuh dan butuh sub-prioritas internal, nested layers yang telah dibahas pada Chapter teori dapat ditambahkan tanpa mengubah peta utama.

Demo: Pemenang di Tiga Lapis #

<div class="kartu">
  <p class="teks" data-expected='{"color":"rgb(2, 132, 199)","margin-top":"0px"}'>
    Gaya komponen menang atas gaya dasar.
  </p>
  <p class="teks utilitas-merah" data-expected='{"color":"rgb(220, 38, 38)"}'>
    Utility unlayered menang atas komponen.
  </p>
</div>

Hasil di Browser:

Paragraf pertama tampil biru (color: rgb(2, 132, 199)) — layer components
dideklarasikan belakangan sehingga menang atas base, dan margin-top 0px
berasal dari layer reset yang menimpa margin bawaan browser.
Paragraf kedua tampil merah (color: rgb(220, 38, 38)) — class
utilitas-merah ditulis unlayered sehingga menang atas seluruh layer.

Dua hasil itu menutup keseluruhan cerita layer: di antara layer, urutan deklarasi yang memutuskan; di atas layer, gaya unlayered yang berkuasa. Demo lengkap membawa atribut data-expected pada kedua paragraf, memverifikasi warna pemenang dan margin hasil reset secara otomatis.

@layer reset, base, components;

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

@layer base {
  .teks {
    color: rgb(71, 85, 105);
    line-height: 1.5;
  }
}

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

/* Utilities ditulis unlayered: menang atas seluruh layer */
.utilitas-merah {
  color: rgb(220, 38, 38);
}