Saat project membesar, CSS bisa menjadi sulit dikelola. Metodologi CSS membantu mengorganisir kode.
1. BEM (Block Element Modifier):
/* Block */
.card { }
/* Element (bagian dari block) */
.card__title { }
.card__body { }
/* Modifier (variasi) */
.card--featured { }
.card__title--large { }
Pola: .block__element--modifier
2. CSS Modules: File CSS yang di-scope otomatis per komponen (umum di React/Vue):
/* Button.module.css */
.btn { padding: 8px 16px; }
/* Menjadi: .Button_btn_x7k2 (unik) */
3. Utility-First (Tailwind CSS):
<div class="flex items-center gap-4 p-4 rounded-lg bg-white">
Kapan pakai apa?
- BEM — project vanilla CSS / tim besar
- CSS Modules — project React/Vue dengan bundler
- Utility-First — project modern, rapid prototyping
Tips: Konsistensi lebih penting dari metodologi. Pilih satu dan pakai terus.
🎭 Analogi sehari-hari
Coba bayangin gudang Tokopedia. Tanpa sistem labelin barang yang konsisten, kacir cari satu produk saja bisa abis 1 jam. Sama halnya CSS di project gede — tanpa methodology, kamu bakal punya 5000 baris CSS yang gak ketemu siapa override siapa. BEM kasih label hierarki rapi (block__element--modifier). Utility-first (Tailwind) kayak sticker fungsional (flex, p-4, text-red) yang ditempelin langsung. CSS Modules kasih kunci pribadi tiap komponen. Pilih satu, konsisten — itu yang penting.
⚠️ Jebakan yang sering ditemui
- Mix metodologi = chaos. Pilih satu pendekatan per project.
- BEM verbose —
__dan--panjang. Tapi readable. - Utility-first (Tailwind) class soup di HTML — modern bisa pakai
@applyuntuk extract. - CSS Modules butuh bundler — tidak vanilla.
- Atomic CSS lawas — banyak class kecil, hard to maintain di skala.
- Refactoring naming convention sulit di codebase besar — pilih awal yang tahan lama.
TL;DR: Methodology CSS = sistem organize CSS biar gak chaos di project gede. BEM (block__element--modifier) = vanilla CSS / tim besar. CSS Modules = scope otomatis per komponen, butuh bundler (React/Vue). Utility-First (Tailwind) = class fungsional langsung di HTML (flex p-4 bg-white), modern + rapid. Aturan emas: konsistensi > metodologi. Pilih satu, jangan mix. Refactor naming convention di codebase besar = sakit kepala.
