Waktu project membesar, nama class gampang tabrakan: dua komponen sama-sama punya .title, lalu CSS yang satu ikut mengubah yang lain. Metodologi CSS adalah aturan penamaan class yang disepakati satu tim, biar CSS tetap rapi dan gak saling tabrakan. Kayak label rak di gudang: dari labelnya aja kamu tahu barang itu milik rak yang mana.
🧪 Tebakan cepat: di nama
.card__title--besar, mana bagian block, element, dan modifier? Tebak dulu, jawabannya ada di bagian "Penamaan BEM".
Penamaan BEM
BEM singkatan dari Block Element Modifier. Ini kartu menu yang class-nya ditulis dengan BEM:
<div class="card card--active">
<h3 class="card__title">Nasi Goreng</h3>
<p class="card__price">Rp 25.000</p>
</div>
<style>
.card { padding: 16px; border: 1px solid #ddd; }
.card__title { font-size: 20px; }
.card__price { color: gray; }
.card--active { border-color: blue; }
</style>
cardadalah block: komponen yang berdiri sendiri.card__titledancard__priceadalah element: bagian di dalam block. Polanya nama block, dua garis bawah__, lalu nama bagiannya.card--activeadalah modifier: variasi dari block. Polanya nama block, dua tanda hubung--, lalu nama variasinya. Modifier ditulis bareng class aslinya:class="card card--active".
Hasilnya, judul kartu 20px, harganya abu-abu, dan bingkainya biru karena kartunya aktif. Dari nama card__price aja kelihatan class itu punya kartu. Kalau komponen lain punya .title, judul kartu ini gak ikut berubah, karena namanya .card__title.
Element juga boleh punya modifier: .card__title--besar adalah judul kartu versi besar. Jadi jawaban tebakan: card block, title element, besar modifier.
CSS-nya tetap CSS biasa
BEM cuma soal nama. Tiap class tetap diatur pakai selector class biasa, titik di depan lalu nama lengkapnya:
.card__title { font-size: 20px; }
Nama di CSS harus persis sama dengan di HTML, termasuk jumlah garis bawahnya. .card_title dengan satu garis bawah itu class lain, jadi aturannya gak kena ke <h3 class="card__title">.
Cara lain menamai class
- SMACSS mengelompokkan CSS jadi base, layout (
.l-grid), module (.card), state (.is-active), dan theme. - Utility-first (contohnya Tailwind) gak bikin class sendiri. Elemen dirakit dari class kecil yang masing-masing mengatur satu properti:
class="p-4 border rounded-lg". - CSS Modules dipakai di project React atau Vue. Kamu menulis
.titlebiasa di fileCard.module.css, lalu build tool (program yang menyiapkan kode sebelum dijalankan) mengganti namanya jadi unik, misalnyaCard_title__3k8p.
Semuanya punya tujuan yang sama: nama class yang konsisten dan gampang dirawat, jadi CSS satu komponen gak mengganggu komponen lain. Yang paling penting, pilih satu cara lalu pakai terus di seluruh project.
⚠️ Jebakan yang sering ketemu
- Satu garis bawah atau satu tanda hubung.
.card_titledan.card-titlebukan BEM. Element pakai__, modifier pakai--. - Modifier tanpa class aslinya.
class="card--active"saja kehilangan semua gaya.card. Tulis dua-duanya. - Element di dalam element.
.card__body__titlebikin nama makin panjang. Tiap element langsung ikut block-nya:.card__title, walau letaknya di dalam.card__body.
TL;DR: Metodologi CSS adalah aturan penamaan class biar CSS konsisten dan gak tabrakan. BEM menulis block__element--modifier: __ sebelum element, -- sebelum modifier, contohnya .card__title--besar. CSS-nya tetap selector class biasa, dengan nama yang persis sama dengan di HTML. Ada juga SMACSS, utility-first, dan CSS Modules. Pilih satu, lalu konsisten.
