Stylesheet yang diawali 200 baris dapat bertambah menjadi ribuan baris seiring fitur masuk satu per satu. Tanpa kesepakatan penataan, mencari satu aturan berarti menyisir berkas, dan urutan aturan yang tidak terkontrol membuat hasil cascade sulit diprediksi. Chapter ini membahas kapan stylesheet layak dipecah, urutan bagian di dalam satu berkas, serta dua alat menjaga keteraturan: comment banner dan @layer.

Satu Berkas atau Beberapa Berkas #

Satu berkas styles.css sepenuhnya sah untuk proyek kecil: tanpa permintaan jaringan tambahan dan mudah dibuka dari atas ke bawah. Pemecahan berkas menjadi bermanfaat ketika tiga tanda muncul:

  • berkas menembus sekitar 800-1000 baris sehingga mencari aturan terasa lambat;
  • lebih dari satu orang menulis CSS pada berkas yang sama;
  • komponen sudah jelas terpisah dan masing-masing berubah sendiri-sendiri.

Perlu diketahui, pemecahan di tingkat sumber tidak mengikat bentuk akhirnya: banyak alat build menggabungkan kembali berkas yang dipecah saat production. Artinya, kita bebas memilih struktur yang paling nyaman dikerjakan tim tanpa mengubah hasil akhir di browser.

Ketika dipecah, urutan <link> di HTML menjadi bagian dari desain. Seperti dibahas pada section cascade, aturan dengan specificity sama diselesaikan oleh source order, sehingga berkas yang dimuat paling akhir berpeluang menimpa berkas sebelumnya:

html 
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/utilities.css">

Dengan urutan di atas, class utilitas pada utilities.css memperoleh kesempatan terakhir untuk menimpa. Jika urutan link diacak, hasil halaman bisa berubah tanpa satu pun baris CSS disunting.

Urutan Bagian di Dalam Berkas #

Berkas tunggal pun butuh urutan baku agar pembaca tahu di mana harus mencari. Urutan yang lazim mengikuti prinsip dari umum ke khusus: custom property paling atas, lalu base/reset, layout, komponen, dan utilitas paling akhir:

css 
/* ============ 1. TOKEN ============ */
:root {
  --warna-teks: #1f2933;
  --warna-utama: #14503a;
  --jarak-konten: 16px;
}

/* ============ 2. BASE ============ */
* {
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: system-ui, sans-serif;
  color: var(--warna-teks);
}

/* ============ 3. LAYOUT ============ */
.tata-halaman {
  display: grid;
  gap: var(--jarak-konten);
}

/* ============ 4. KOMPONEN ============ */
.tombol {
  background-color: var(--warna-utama);
  color: #ffffff;
  border: none;
  border-radius: 8px;
}

/* ============ 5. UTILITAS ============ */
.rata-tengah {
  text-align: center;
}

Utilitas sengaja ditulis terakhir. Class seperti .rata-tengah memang dirancang untuk menimpa aturan komponen, dan posisi akhir di source order mewujudkan tujuan itu tanpa perlu menaikkan specificity.

Comment Banner #

Banner komentar seperti /* ============ 4. KOMPONEN ============ */ bekerja pada tiga lapis sekaligus: penanda visual saat menggulir berkas, kata kunci pencarian cepat lewat Ctrl+F, dan penomoran yang menuntun urutan bagian. Penomoran juga mempermudah komunikasi tim: “perbaiki bagian 4, komponen tombol” langsung terpetakan tanpa menempelkan cuplikan kode. Pakai satu format banner untuk seluruh proyek; banner yang bentuknya berubah-ubah justru menyulitkan pencarian.

@layer: Urutan Bawaan dari CSS #

Banner membantu manusia, tetapi CSS juga menyediakan mekanisme asli untuk urutan: @layer, yang didukung seluruh browser modern. Pada cascade, urutan layer dinilai sebelum specificity. Deklarasi pada layer yang diumumkan lebih dulu selalu kalah dari layer berikutnya, seberapa pun selisih specificity-nya:

css 
@layer base, komponen, utilitas;

@layer komponen {
  .kartu-profil .nama {
    color: #14503a;
  }
}

@layer utilitas {
  .teks-abu {
    color: #64748b;
  }
}

Baris pertama mendeklarasikan tiga layer beserta urutannya. Selector .kartu-profil .nama berbobot (0, 2, 0), sedangkan .teks-abu hanya (0, 1, 0). Tanpa layer, hijau menang. Dengan layer, abu menang karena layer utilitas berada paling akhir — persis kebutuhan class utilitas. Nama layer bebas mengikuti arsitektur proyek; tim yang memakai struktur berkas tokens-base-components dapat menyamakan nama layer dengan nama berkasnya agar satu pemetaan yang sama dipakai di dua tempat.

Demo berikut meniru berkas CSS yang dimuat berurutan melalui tiga blok <style>. Panel kiri memuatnya tanpa layer, panel kanan dengan layer; markup keduanya dibuat identik:

Keputusan warna kini milik urutan layer, bukan kekuatan selector — utilitas menang tanpa mengubah satu karakter selector.

Ringkasan #

Stylesheet yang tertata menempatkan token di atas, base sebelum komponen, dan utilitas di posisi terakhir; pemecahan berkas mengikuti urutan link yang disengaja. Comment banner membantu navigasi manusia, sedangkan @layer menyediakan urutan resmi yang dinilai browser sebelum specificity. Letak aturan sudah tertata; kini isinya perlu dirapatkan — chapter berikutnya mengurangi pengulangan di antara aturan-aturan tersebut.