Utility Classes

Sementara component-based CSS dan BEM menamai komponen secara utuh, pendekatan utility classes mengambil arah yang berlawanan: setiap class menjalankan satu tugas kecil — memberi jarak atas, memusatkan teks, mengaktifkan flex — dan tampilan akhir dirakit dengan menggabungkan banyak class di markup. Gaya populer ini dipakai framework seperti Tailwind CSS, tetapi fondasinya murni CSS biasa dan dapat kita bangun sendiri dalam belasan baris. Pertukarannya jelas: HTML menjadi lebih verbose, sedangkan stylesheet berhenti tumbuh karena kombinasi baru tidak menambah aturan baru. Chapter ini membahas filosofinya, trade-off yang harus kita sadari, dan situasi ketika utility classes paling menguntungkan.

Filosofi Satu Class, Satu Tugas #

Utility class adalah pasangan nama dan deklarasi yang bersifat dapat ditebak tanpa membuka stylesheet:

.text-center { text-align: center; }
.flex        { display: flex; }
.gap-2       { column-gap: 8px; row-gap: 8px; }
.mt-4        { margin-top: 16px; }
.p-4         { padding: 16px; }

Angka pada nama mengikuti skala spasi — di sini kelipatan 4px, sehingga .mt-4 berarti 16px. Skala ini adalah kunci konsistensinya: tanpa skala, angka acak seperti .mt-13 muncul dan desain kehilangan ritmenya. Dua sifat lain yang membedakan utility class dari class biasa:

1. Specificity serendah mungkin — satu class, 0,1,0 — sehingga utilitas dapat dipakai di atas komponen mana pun tanpa perlawanan; strategi penempatannya kita bahas pada Chapter Avoiding Specificity Conflicts .
2. Tidak ada konteks tersembunyi — .mt-4 berperilaku identik di mana pun, berbeda dengan class komponen yang gayanya saling bergantung pada struktur internal.

Trade-off yang Harus Disadari #

Pendekatan ini menukar kerapian markup dengan kemudahan perawatan CSS:

Dua konsekuensi praktisnya: pertama, perubahan desain massal — misalnya semua kartu membulat lebih dalam — berarti menyunting markup di banyak tempat, bukan satu baris di CSS. Kedua, utility class tidak mengekspresikan makna: pembaca markup melihat .p-4 tetapi tidak tahu apakah itu panel, kartu, atau banner. Karena itu tim yang memakai utility classes umumnya tetap menyimpan class komponen untuk pengelompokan semantik, lalu memakai utilitas untuk penyusunan (spacing, alignment, layout).

Kapan Utility Classes Cocok #

Utility classes paling menguntungkan pada tiga situasi: prototipe cepat, halaman yang komposisinya unik satu kali (landing page, artikel), dan penyesuaian kecil di atas komponen — misalnya satu tombol yang perlu jarak ekstra tanpa membuat modifier baru. Bila satu gaya sama persis dipakai di banyak tempat, itu sinyal untuk dijadikan komponen; bila gayanya beda-beda setiap tempat, utilitas lebih hemat.

Demo chapter ini merakit satu panel dari empat utility:

<section class="panel p-4">
  <h3 class="judul text-center">Ringkasan Mingguan</h3>
  <div class="baris flex gap-2">
    <span class="kotak mt-4">Aktif</span>
    <span class="kotak mt-4">Selesai</span>
  </div>
</section>

Hasil di Browser:

Panel memiliki padding 16px di setiap sisi dari utility .p-4.
Judul "Ringkasan Mingguan" rata tengah (text-align: center).
Baris label menjadi flex dengan jarak kolom 8px dari .flex dan .gap-2.
Setiap kotak label turun 16px dari utility .mt-4 (margin-top: 16px).

Mari kita telaah rakitannya:

1. .panel.p-4: .panel memberi identitas semantik dan warna, .p-4 memberi padding 16px — peran semantik dan penyusunan dipisahkan.
2. .judul.text-center: perataan teks tidak perlu aturan CSS baru; .text-center sudah tersedia untuk elemen mana pun.
3. .baris.flex.gap-2: dua utilitas bertumpuk pada satu elemen, menghasilkan flex container dengan jarak kolom 8px — kombinasi tanpa satu pun baris CSS tambahan.
4. .kotak.mt-4: jarak atas 16px dari utilitas; bila desain berubah, kita cukup mengganti ke .mt-6 di markup.

Utilitas dan design tokens saling melengkapi: nilai 16px pada .mt-4 idealnya dibaca dari token spasi agar skala tetap satu sumber kebenaran — topik bab berikutnya.

/* Utility set mini — skala spasi kelipatan 4px */
.text-center { text-align: center; }
.flex        { display: flex; }
.gap-2       { column-gap: 8px; row-gap: 8px; }
.mt-4        { margin-top: 16px; }
.p-4         { padding: 16px; }