Belajar CSS - Arsitektur CSS: BEM, OOCSS, dan Utility-First

#Pendahuluan

Episode 19 membahas kebersihan dan modularitas CSS. Episode 20 menjawab pertanyaan lanjutan: metodologi apa yang sebaiknya dipakai? Tiga pendekatan dominan mewarnai dunia CSS — BEM, OOCSS, dan utility-first — dan masing-masing punya kekuatan serta kelemahan. BEM menata nama kelas secara ketat untuk komponen yang jelas batasnya. OOCSS memisahkan struktur dari tampilan agar style bisa dipakai ulang. Utility-first membangun antarmuka dari class kecil yang mencerminkan satu properti. Mengapa penting? Pilihan arsitektur memengaruhi kecepatan pengembangan dan kemudahan maintenance bertahun-tahun. Tidak ada jawaban tunggal yang benar — kalian perlu memahami ketiganya untuk memilih sesuai konteks tim dan proyek.

#BEM: Block, Element, Modifier

BEM membagi nama kelas menjadi tiga bagian:

bem.css

/* Block: komponen mandiri */
.card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}
/* Element: bagian dari block, ditandai dua underscore */
.card__title {
  font-size: 1.25rem;
}
.card__body {
  color: #475569;
}
/* Modifier: variasi state, ditandai dua dash */
.card--featured {
  border-color: #2563eb;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.2);
}

Block diberi nama mandiri, element melekat pada block, dan modifier menyatakan variasi. Aturan utamanya: element tidak boleh berdiri di luar block-nya, dan modifier tidak boleh dipakai tanpa block dasarnya. Struktur ini membuat relasi komponen terlihat langsung dari nama kelas.

bem.html

<article class="card card--featured">
  <h2 class="card__title">Judul Unggulan</h2>
  <p class="card__body">Deskripsi kartu yang ditampilkan.</p>
</article>

Kelebihan BEM adalah kejelasan dan spesifisitas yang selalu datar — satu block, satu class. Kekurangannya, nama kelas bisa panjang dan HTML menjadi padat.

#OOCSS: Memisahkan Struktur dari Tampilan

OOCSS (Object-Oriented CSS) memisahkan struktur (dimensi dan layout) dari tampilan (warna dan tipografi), lalu menggabungkannya melalui beberapa class:

oocss.css

/* Struktur: bisa dipakai ulang untuk bentuk berbeda */
.box {
  padding: 16px;
  border-radius: 8px;
}
/* Tampilan: skin yang bisa menempel pada bentuk apa pun */
.skin-peringatan {
  background-color: #fef3c7;
  border: 1px solid #f59e0b;
  color: #92400e;
}
.skin-sukses {
  background-color: #dcfce7;
  border: 1px solid #16a34a;
  color: #166534;
}

oocss.html

<div class="box skin-peringatan">Peringatan penting</div>
<div class="box skin-sukses">Operasi berhasil</div>

Elemen yang berbeda bentuk namun skin sama bisa berbagi class. Pemisahan ini mendorong pemakaian ulang dan mencegah penggandaan properti yang identik. Risikonya, class yang terlalu generik bisa mempersulit pencarian komponen.

#Utility-First

Utility-first membangun UI dari class kecil yang mewakili satu properti tunggal:

utilities.css

.p-4 { padding: 16px; }
.mb-2 { margin-bottom: 8px; }
.flex { display: flex; }
.items-center { align-items: center; }
.rounded { border-radius: 8px; }
.bg-blue { background-color: #2563eb; }
.text-white { color: white; }

Antarmuka disusun langsung di HTML dari kombinasi class:

utility.html

<button class="flex items-center p-4 rounded bg-blue text-white">
  Kirim
</button>

Pendekatan ini diadopsi oleh Tailwind CSS, yang menyediakan ribuan utility siap pakai. Keunggulannya: tidak perlu berpikir nama kelas, perubahan cepat, dan kode konsisten. Kekurangannya: HTML menjadi panjang dan class yang sama berulang di banyak tempat.

#Memilih Pendekatan yang Tepat

Ketiganya tidak saling eksklusif — kombinasi umum terjadi:

hybrid.css

/* BEM untuk komponen reusable yang kompleks */
.site-header__nav {
  display: flex;
  gap: 16px;
}
/* Utility untuk spacing satu kali yang tidak perlu komponen */
.utilities-mt-1 {
  margin-top: 4px;
}

Panduan praktisnya: utility-first cocok untuk iterasi cepat dan tim kecil; BEM unggul untuk komponen yang dipakai banyak tim dengan batas yang jelas; OOCSS berguna saat banyak elemen berbagi pola visual. Tim produksi besar kerap menggabungkan BEM untuk komponen dan utility untuk penyetelan cepat.

#Latihan: Membandingkan di Halaman yang Sama

index.html

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8">
    <title>Arsitektur CSS</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <section class="section section--padat">
      <h2 class="section__title">Belajar Arsitektur CSS</h2>
      <button class="button button--primary">BEM</button>
      <button class="button button--secondary">OOCSS</button>
      <button class="button button--primary button--besar">Utility</button>
    </section>
  </body>
</html>

css/style.css

* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; padding: 24px; }
.section { max-width: 640px; margin-inline: auto; padding: 24px; border: 1px solid #e2e8f0; border-radius: 12px; }
.section__title { margin-bottom: 16px; }
.button { display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; border-radius: 8px; font-size: 1rem; border: none; cursor: pointer; }
.button--primary { background-color: #2563eb; color: white; }
.button--secondary { background-color: #e2e8f0; color: #0f172a; }
.button--besar { padding: 14px 24px; font-size: 1.125rem; }

Buka halaman di browser dengan npx serve . dan perhatikan bagaimana satu class dasar .button menyatukan bentuk, sementara modifier mengubah tampilan. Tulis ulang versi utility-first di file terpisah lalu bandingkan panjang HTML dan CSS keduanya.

#Kesalahan Umum dan Solusinya

#BEM yang Dibuat Tidak Konsisten

Mencampur __ dan -- secara salah merusak keterbacaan. Tetapkan aturan nama (block __ element -- modifier) dan patuhi di seluruh proyek.

#Utility yang Menciptakan Class Sendiri

Sebelum menambah utility baru, periksa apakah utility serupa sudah ada. Utility yang tumpang tindih membuat HTML sulit diprediksi.

#Mengganti Metodologi di Tengah Jalan

Pindah metodologi membuat stylesheet campur aduk. Bila berniat migrasi, lakukan bertahap per komponen dan pertahankan keduanya selama transisi.

#Penutup

Inti yang harus dibawa pulang:

• BEM memakai block, element, dan modifier dengan spesifisitas yang selalu datar.
• OOCSS memisahkan struktur dari tampilan agar class dipakai ulang.
• Utility-first menyusun UI dari class kecil satu properti, dipopulerkan Tailwind.
• Ketiganya bisa digabung: BEM untuk komponen, utility untuk penyetelan.
• Pilihan metodologi harus disesuaikan dengan skala tim dan proyek.
• Konsistensi lebih penting daripada memilih metodologi yang "benar". Di episode 21 selanjutnya kita akan membahas mengintegrasikan CSS dengan HTML dan JS modern — CSS Modules, CSS-in-JS, dan manipulasi class lewat JavaScript.