Maintainable CSS

Semua keputusan arsitektur di section ini — struktur folder, konvensi penamaan, komponen, token, layer — pada akhirnya bermuara pada satu pertanyaan: seberapa cepat anggota tim baru (atau kita sendiri enam bulan ke depan) dapat mengubah tampilan tanpa membongkar yang lain. Maintainable CSS bukan pola tunggal, melainkan kumpulan kebiasaan yang saling menguatkan dan dijalankan terus-menerus. Chapter ini merangkumnya menjadi checklist yang bisa ditempel di repo, membahas kapan DRY melampaui batas sehatnya, dan menutup section CSS Architecture dengan stylesheet contoh yang menerapkan seluruh kebiasaan tersebut.

Checklist Kualitas Stylesheet #

Gunakan daftar berikut saat menulis maupun saat me-review pull request:

1. Konsistensi konvensi — penamaan class, struktur folder, dan format token mengikuti satu konvensi yang terdokumentasi (lihat Naming Conventions ).
2. Komentar seksi — setiap file dibuka dengan judul concern, dan stylesheet besar dipisah seksi bernomor sehingga Ctrl+F cukup untuk bernavigasi.
3. Selector flat — satu class satu aturan; rantai turunan dan ID dihindari (lihat Avoiding Specificity Conflicts ).
4. Tanpa nilai mentah — warna, spasi, dan radius dibaca dari token, bukan angka tersebar (lihat Design Tokens ).
5. Review sebelum merge — perubahan CSS diperiksa seperti kode lain: ada efek sampingnya ke halaman yang tidak disentuh.
6. Refactor bertahap — perbaikan dilakukan dalam perubahan kecil yang teruji, bukan penulisan ulang besar sekaligus.
7. Pengukuran — ukuran stylesheet, jumlah selector, dan properti yang tak terpakai dicek berkala (panel Coverage pada DevTools membantu menemukan CSS yang tak pernah jalan).

Tiga butir pertama terlihat pada stylesheet contoh chapter ini:

/* ============================================
   1. TOKENS
   ============================================ */
:root {
  --warna-primer: rgb(2, 132, 199);
  --warna-teks: rgb(15, 23, 42);
  --spasi-2: 8px;
  --spasi-3: 16px;
  --radius-kecil: 8px;
}

/* ============================================
   2. KOMPONEN — Tombol
   ============================================ */
.tombol {
  display: inline-block;
  background-color: var(--warna-primer);
  color: rgb(255, 255, 255);
  border-radius: var(--radius-kecil);
  padding: var(--spasi-2) var(--spasi-3);
  font-size: 14px;
}

/* ============================================
   3. KOMPONEN — Kartu
   ============================================ */
.kartu {
  color: var(--warna-teks);
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(226, 232, 240);
  border-radius: var(--radius-kecil);
  padding: var(--spasi-3);
}

Hasil di Browser:

Tombol tampil dengan latar rgb(2, 132, 199) dari token --warna-primer,
padding-top 8px dari --spasi-2, dan sudut 8px dari --radius-kecil.
Kartu menampilkan teks rgb(15, 23, 42) dari --warna-teks dengan
padding-top 16px dari --spasi-3.

DRY dengan Batas #

Prinsip DRY (Don’t Repeat Yourself) mengajarkan agar keputusan yang sama tidak ditulis di banyak tempat — design tokens adalah penerapannya yang paling berhasil. Namun DRY memiliki batas: dua aturan yang kebetulan mirip belum tentu satu maksud. Menggabungkan .kartu-produk dan .kartu-profil menjadi satu class hanya karena sama-sama berlatar putih menciptakan kopling palsu — perubahan kartu produk memaksa kartu profil ikut berubah. Batasan yang sehat:

• Duplikasi nilai (warna, spasi) → diringkas jadi token.
• Duplikasi maksud (lima tombol yang sama) → diringkas jadi komponen.
• Duplikasi kebetulan (dua komponen yang sementara mirip) → biarkan terpisah.

Membedakan ketiganya butuh pertanyaan sederhana: bila salah satu berubah, apakah yang lain harus ikut berubah? Bila jawabannya tidak, jangan digabungkan.

Section CSS Architecture berakhir di sini dengan fondasi yang lengkap: file yang tertata, nama yang konsisten, komponen yang mandiri, token sebagai kontrak, dan prioritas yang terkendali. Langkah berikutnya adalah menerapkan semuanya pada Section Themes dan Design Systems .

/* ============================================
   1. TOKENS
   ============================================ */
:root {
  --warna-primer: rgb(2, 132, 199);
  --warna-teks: rgb(15, 23, 42);
  --spasi-2: 8px;
  --spasi-3: 16px;
  --radius-kecil: 8px;
}

/* ============================================
   2. KOMPONEN — Tombol
   ============================================ */
.tombol {
  display: inline-block;
  background-color: var(--warna-primer);
  color: rgb(255, 255, 255);
  border-radius: var(--radius-kecil);
  padding: var(--spasi-2) var(--spasi-3);
  font-size: 14px;
}

/* ============================================
   3. KOMPONEN — Kartu
   ============================================ */
.kartu {
  color: var(--warna-teks);
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(226, 232, 240);
  border-radius: var(--radius-kecil);
  padding: var(--spasi-3);
}