Evolusi Styling Utility-First

Kenapa ini penting

Sebelum belajar sebuah alat, ada baiknya kamu tahu masalah apa yang ingin ia selesaikan. Tailwind sering memancing debat: ada yang langsung jatuh cinta, ada yang merasa HTML-nya jadi "kotor" karena penuh class. Kedua reaksi itu masuk akal, dan keduanya lebih mudah dipahami kalau kamu tahu perjalanan cara orang menulis CSS selama 20 tahun terakhir.

Dengan memahami evolusi ini, kamu bisa membuat keputusan sendiri: kapan Tailwind cocok, kapan CSS biasa atau CSS Modules lebih pas, dan bagaimana menjawab pertanyaan rekan tim yang skeptis. Di dunia kerja, kemampuan menjelaskan kenapa memilih suatu alat sama berharganya dengan kemampuan memakainya.

Konsep inti

Tahap 1: CSS biasa dengan class semantik

Awalnya kita menulis HTML dengan class yang menggambarkan isi atau peran, misalnya .sidebar, .product-card, .header. Lalu di file CSS kita menulis semua aturannya. Cara ini terasa rapi di proyek kecil. Masalahnya muncul ketika proyek membesar:

• Konflik nama dan specificity. Specificity adalah "bobot" sebuah selector yang menentukan aturan mana yang menang. .sidebar .title mengalahkan .title, dan lama-lama orang menambah !important di mana-mana.
• CSS hanya bertambah, tidak pernah berkurang. Orang takut menghapus aturan lama karena tidak tahu halaman mana yang masih memakainya. File CSS membengkak.
• Berpindah konteks terus-menerus. Untuk mengubah satu tombol, kamu bolak-balik antara file HTML dan file CSS.

Tahap 2: Metodologi BEM

BEM (Block, Element, Modifier) muncul untuk menertibkan penamaan. Contohnya .card, .card__title, .card--featured. Dengan aturan penamaan yang ketat, konflik berkurang karena tiap selector hanya satu class (specificity rata). BEM masih dipakai dan bagus, tetapi tetap ada pekerjaan berat: kamu harus terus memikirkan nama, dan CSS masih tumbuh linear dengan jumlah komponen. Dua komponen yang sama-sama butuh padding: 16px; border-radius: 8px; tetap menulis aturan itu dua kali.

Tahap 3: Framework komponen (Bootstrap)

Bootstrap memberi class siap pakai seperti .btn, .btn-primary, .card, .navbar. Kamu bisa membangun halaman dengan cepat tanpa menulis CSS sama sekali. Kelemahannya: semua situs Bootstrap terlihat mirip. Begitu desainer meminta tombol yang sedikit berbeda, kamu mulai "melawan" framework dengan menimpa aturannya, dan kembali ke masalah specificity.

Tahap 4: Utility-first (Tailwind)

Utility class adalah class kecil yang melakukan satu hal: p-4 memberi padding, text-center meratakan teks ke tengah, bg-blue-600 memberi warna latar. Kamu menyusun desain langsung di HTML dengan menggabungkan potongan kecil ini, seperti menyusun balok LEGO. Analoginya begini: CSS semantik itu seperti memesan menu paket di restoran (praktis, tapi kalau mau ganti lauk harus nego). Utility-first itu seperti prasmanan: kamu ambil sendiri komponen yang kamu mau, persis sesuai selera.

Tailwind juga hanya menghasilkan CSS untuk class yang benar-benar kamu pakai. Jadi meskipun ada ribuan utility yang tersedia, file CSS produksimu biasanya kecil.

Tabel pro dan kontra

Kritik paling umum terhadap Tailwind adalah "ini sama saja dengan inline style". Jawabannya: tidak sama. Inline style (style="padding: 13px") tidak punya skala desain, tidak bisa memakai hover, focus, atau media query, dan tidak bisa dibatasi pada nilai tertentu. Utility Tailwind punya semua itu: hover:bg-blue-700, md:flex, dark:text-white, dan nilainya diambil dari skala yang konsisten.

Kritik kedua: "HTML jadi panjang." Ini benar. Solusinya bukan kembali ke CSS semantik, tetapi memecah UI menjadi komponen (misalnya komponen React <Button>), sehingga daftar class panjang itu cukup ditulis sekali. Ini akan kita bahas di modul 14 dan 16.

Contoh kode

Mari bandingkan kartu profil yang sama dengan tiga gaya.

<!-- Gaya 1: CSS semantik / BEM -->
<style>
  .profile-card { padding: 24px; border-radius: 12px; background: #fff;
                  box-shadow: 0 1px 3px rgba(0,0,0,.1); }
  .profile-card__name { font-size: 20px; font-weight: 700; }
  .profile-card__role { color: #6b7280; }
</style>
<div class="profile-card">
  <h3 class="profile-card__name">Rina Lestari</h3>
  <p class="profile-card__role">Frontend Developer</p>
</div>

<!-- Gaya 2: Bootstrap (class komponen siap pakai) -->
<div class="card p-4 shadow-sm">
  <h3 class="card-title fw-bold">Rina Lestari</h3>
  <p class="card-text text-muted">Frontend Developer</p>
</div>

<!-- Gaya 3: Tailwind v4 (utility-first) -->
<div class="rounded-xl bg-white p-6 shadow-sm">
  <h3 class="text-xl font-bold">Rina Lestari</h3>
  <p class="text-gray-500">Frontend Developer</p>
</div>
<!-- → ketiganya tampil hampir sama, tapi gaya 3 tidak butuh file CSS tambahan -->

Perhatikan bahwa pada gaya 3, kamu bisa langsung menebak tampilannya hanya dari membaca class: sudut membulat besar, latar putih, padding 1.5rem, bayangan tipis.

Kesalahan umum

1. Menganggap Tailwind = inline style. Utility punya skala, variant (hover, responsive, dark), dan dihasilkan sebagai class biasa. Pelajari bedanya agar kamu bisa memakainya dengan benar.
2. Menyalin pola Bootstrap ke Tailwind. Membuat class .btn raksasa dengan @apply untuk semua elemen membuat kamu kehilangan manfaat utility-first. Gunakan komponen dulu.
3. Mencampur banyak pendekatan tanpa aturan. Sedikit CSS kustom itu wajar, tetapi tentukan aturan tim: kapan memakai utility, kapan menulis CSS.
4. Memilih alat karena tren. Untuk halaman statis satu file yang tidak akan berubah, CSS biasa mungkin cukup. Tailwind paling terasa manfaatnya di proyek yang terus berkembang.

Latihan

1. Mudah, Sebutkan dua masalah CSS semantik di proyek besar yang dicoba diselesaikan BEM.
2. Sedang, Ubah HTML BEM berikut menjadi Tailwind: .alert { padding: 16px; background: #fef2f2; color: #b91c1c; border-radius: 8px; }.
3. Menantang, Tulis argumen singkat (3-4 kalimat) untuk menjawab rekan yang bilang "Tailwind itu inline style", lengkap dengan satu contoh class yang tidak mungkin dibuat dengan inline style.

<div class="rounded-lg bg-red-50 p-4 text-red-700">
  Terjadi kesalahan saat menyimpan data.
</div>
<!-- → kotak merah muda dengan teks merah tua -->

<button class="bg-blue-600 md:hover:bg-blue-700">Simpan</button>

Ringkasan

• CSS semantik rapi di awal, tapi rawan konflik specificity dan membengkak.
• BEM menertibkan nama, tetapi masih banyak duplikasi dan beban memikirkan nama.
• Bootstrap cepat, tetapi desainnya seragam dan susah dikustom.
• Utility-first menyusun desain dari class kecil berskala konsisten, CSS produksi tetap kecil.
• Kelemahan "class panjang" diatasi dengan memecah UI menjadi komponen.