Metodologi BEM: Block, Element, Modifier
Beri nama class CSS dengan pola Block__Element--Modifier untuk membuat style komponen yang mudah dipahami, berspesifisitas rendah, dan dapat digunakan kembali.
Metodologi BEM: Block, Element, Modifier adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa Itu BEM
BEM (Blok, Elemen, Pengubah) adalah konvensi penamaan CSS yang membuat gaya dapat diprediksi, dapat digunakan kembali, dan bebas konflik. Dengan menyandikan struktur komponen dalam nama kelas, BEM menghilangkan konflik spesifisitas dan benturan gaya yang tidak disengaja.
Blok — Komponen Mandiri
Blok adalah komponen mandiri yang dapat digunakan kembali: card, button, nav. Nama kelasnya adalah nama blok, ditulis dalam huruf kecil dengan tanda hubung.
<div class="card">...</div>
<button class="btn">...</button>
<nav class="main-nav">...</nav>Elemen — Bagian dari Blok
Elemen adalah bagian dari Blok yang tidak memiliki makna sendiri. Gunakan dua garis bawah: block__element.
<div class="card">
<img class="card__image" src="..." alt="...">
<div class="card__body">
<h2 class="card__title">Title</h2>
<p class="card__description">...</p>
</div>
<footer class="card__footer">
<a class="card__link" href="...">Read more</a>
</footer>
</div>Pengubah — Varian dan Keadaan
Pengubah mengubah tampilan atau perilaku Blok atau Elemen. Gunakan dua tanda hubung: block--modifier atau block__element--modifier.
<button class="btn">Default</button>
<button class="btn btn--primary">Primary</button>
<button class="btn btn--danger btn--large">Large Danger</button>
<div class="card card--featured">...</div>
<nav class="main-nav main-nav--collapsed">...</nav>Aturan CSS BEM
Kelas BEM memiliki spesifisitas rendah dan setara (masing-masing satu kelas). Hal ini membuat gaya mudah ditimpa. Jangan pernah menggunakan ID atau pemilih elemen bertingkat—keduanya meningkatkan spesifisitas secara tidak terduga.
/* Good BEM CSS */
.card { /* ... */ }
.card__title { /* ... */ }
.card--featured { /* ... */ }
/* Avoid */
.card h2 { /* targets any h2 in .card — too broad */ }
#featured-card { /* high specificity — hard to override */ }BEM dengan Sass
Pemilih induk & dari Sass membuat penulisan BEM lebih ringkas. CSS hasil kompilasinya identik dengan BEM biasa.
.card {
padding: 16px;
&__title {
font-size: 1.25rem;
font-weight: 600;
}
&__body {
color: var(--color-text-secondary);
}
&--featured {
border: 2px solid var(--color-brand);
}
}Kapan Membuat Blok Baru
Buat Blok baru ketika komponen dapat berdiri sendiri dan digunakan kembali dalam konteks berbeda. Buat Elemen ketika bagian tersebut hanya bermakna di dalam satu Blok tertentu.
BEM Menghindari Penyarangan
BEM tidak menganjurkan penyarangan mendalam dalam HTML dan CSS. Elemen di dalam elemen tetap berupa block__element, bukan block__element__subelement.
<!-- Correct: -->
<div class="card">
<div class="card__meta">
<time class="card__date">Jan 1</time>
</div>
</div>
<!-- Wrong: -->
<div class="card">
<div class="card__meta">
<time class="card__meta__date">Jan 1</time> <!-- 3 levels = wrong -->
</div>
</div>BEM dan JavaScript
Gunakan kelas khusus JS yang terpisah untuk pengait perilaku: awalan js-. Hal ini memisahkan gaya dan skrip — mengganti nama kelas BEM tidak akan merusak perilaku JavaScript.
<button class="btn btn--primary js-submit">Submit</button>
// JS: select by js- class
document.querySelector('.js-submit').addEventListener('click', handleSubmit);Mencampur Blok BEM
Satu elemen dapat memiliki beberapa kelas blok untuk penataan khusus konteks tanpa membuat blok-blok tersebut saling bergantung.
<button class="btn btn--primary form__submit">Submit</button>Keterbatasan BEM
Nama kelas dapat menjadi panjang. BEM paling cocok untuk tim besar dan sistem desain yang mementingkan konsistensi gaya global. Untuk kerangka kerja komponen (React/Vue) dengan gaya tercakup, manfaat ruang nama BEM tidak terlalu penting.
Pemeriksaan Singkat
Dalam BEM, apa yang direpresentasikan oleh card__title--truncated?
Ringkasan: BEM
Blok: komponen mandiri. Elemen (dua garis bawah __): bagian dari blok. Pengubah (dua tanda hubung --): varian atau keadaan. Spesifisitas rendah dan setara. Hindari pemilih ID dan penyarangan mendalam. Gunakan awalan js- untuk pengait JavaScript. Sass & membuat BEM lebih ringkas. Sangat baik untuk tim besar dan sistem desain.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Metodologi BEM: Block, Element, Modifier” gratis?
Ya — teks lengkap “Metodologi BEM: Block, Element, Modifier” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Metodologi BEM: Block, Element, Modifier”?
Beri nama class CSS dengan pola Block__Element--Modifier untuk membuat style komponen yang mudah dipahami, berspesifisitas rendah, dan dapat digunakan kembali. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Frontend Academy?
Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “Metodologi BEM: Block, Element, Modifier” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?
Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Metodologi BEM: Block, Element, Modifier
- Modul CSS: Nama Class Berscope
- CSS-in-JS: Styled-components dan Emotion
- Pendekatan Utility-First Tailwind CSS