Aturan CSS yang Dapat Digunakan Ulang

Custom properties membuat nilai dapat dipakai ulang, tetapi sering kali yang berulang di stylesheet bukan satu nilai, melainkan satu aturan utuh: tiga deklarasi untuk memusatkan teks di sini, lima deklarasi untuk tombol di sana. Untuk kebutuhan itu CSS menyediakan dua alat yang bekerja di level aturan: utility class yang memuat satu tugas kecil, dan class komponen dengan modifier untuk variasi. Chapter ini membedah keduanya, melihat kelebihan dan konsekuensinya, lalu menetapkan kapan waktu yang tepat untuk mengabstraksi.

Utility Class: Satu Aturan, Satu Tugas #

Utility class adalah class yang hanya memuat satu atau dua deklarasi dengan tujuan yang sangat spesifik. Namanya langsung menggambarkan efeknya, sehingga bisa dipasang di markup tanpa perlu menulis CSS baru:

.teks-tengah {
  text-align: center;
}

.teks-tebal {
  font-weight: 700;
}

.mt-4 {
  margin-top: var(--spasi-4);
}

Perhatikan bahwa .mt-4 membaca token skala spasi dari chapter sebelumnya — utilitas dan variabel bukan dua dunia yang terpisah, melainkan saling menguatkan: token menjaga angka tetap konsisten, utilitas menjaga aturan tetap ringkas.

Utilitas paling berguna untuk penyesuaian kecil di tepi komponen: menggeser satu blok, memusatkan satu caption, menebalkan satu kata. Bila sebuah “penyesuaian kecil” ternyata membawa lima deklarasi styling, itu bukan utilitas lagi — itu komponen yang belum diberi nama.

Kekuatan dan konsekuensinya perlu dilihat berdampingan:

Komponen dengan Modifier #

Untuk blok yang muncul berulang dengan variasi, pola yang lebih tepat adalah class komponen plus modifier: satu class dasar memuat wajib tampilan, dan modifier menambahkan variasi di atasnya:

.tombol {
  background-color: var(--warna-aksen);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: var(--spasi-3) var(--spasi-4);
}

.tombol--besar {
  padding: var(--spasi-4) var(--spasi-5);
  font-size: 1.125rem;
}

.tombol--lembut {
  background-color: #eef4f0;
  color: #14503a;
}

Dua class dipasang bersama di markup — dasar dulu, modifier kedua:

<button class="tombol" type="button">Simpan</button>
<button class="tombol tombol--besar" type="button">Mulai Sekarang</button>
<button class="tombol tombol--lembut" type="button">Nanti Saja</button>

Pola penamaan blok--modifier ini adalah pengenalan awal; konvensi lengkapnya, termasuk hubungannya dengan penamaan variabel dan token, kita rapikan pada chapter Naming Conventions berikutnya.

Perbedaan mendasarnya dengan utilitas: komponen menyimpan makna (“tombol utama halaman ini”), sedangkan utilitas menyimpan efek (“margin atas 16px”). Ketika desain tombol berubah, satu perubahan di .tombol cukup untuk seluruh halaman — sesuatu yang tidak bisa dilakukan puluhan utilitas yang tersebar di markup.

Demo berikut menggabungkan class komponen, modifier, dan utilitas dalam satu panel:

Satu panel, tiga lapis alat — komponen, modifier, utilitas — tanpa satu pun deklarasi duplikat. Utilitas .mt-4 memberi jarak yang angkanya berasal dari token skala spasi, bukan dari angka lepas.

Mengabstraksi dengan Aturan Tiga #

Utilitas dan komponen adalah alat abstraksi, dan abstraksi yang terlalu dini sama merugikannya dengan abstraksi yang terlambat. Panduan yang lazim dipakai adalah rule of three:

• Muncul sekali: tulis langsung di aturan komponen; belum ada pola yang bisa diyakini.
• Muncul dua kali: catat dulu, tunda keputusan; dua kemunculan bisa kebetulan.
• Muncul tiga kali atau lebih: abstraksi — jadikan class komponen, modifier, utilitas, atau token.

Aturan ini menjaga stylesheet tetap jujur: tidak ada lapisan tambahan untuk pola yang belum terbukti, dan tidak ada duplikasi yang menyebar karena dianggap “kebetulan” terus-menerus. Ketika tiga tombol di tiga halaman ternyata memakai deklarasi yang sama persis, itu bukan kebetulan lagi — itulah saat .tombol lahir. Bentuk abstraksinya pun mengikuti isinya: nilai yang berulang menjadi token, aturan yang berulang menjadi class.

Ringkasan #

Pemakaian ulang aturan CSS punya dua alat utama: utility class untuk efek kecil yang sering dibutuhkan mendadak, dan class komponen dengan modifier untuk blok yang punya makna dan variasi. Keduanya paling kuat saat duduk di atas token — angka dari custom properties, aturan dari class. Panduan rule of three menjaga kapan abstraksi layak dibuat. Dengan semua alat ini di tangan, chapter berikutnya menyusun konvensi penamaan yang membuat stylesheet tetap terbaca saat proyek dan timnya bertambah besar.