Mungkin pernah melihat pola atau struktur html seperti contoh elemen nav dibawah; kita bisa lihat dari cara penamaan class elemen nya.
<nav class="main-nav">
<ul class="main-nav__list">
<li class="main-nav__item--modifier">
<a href="#" class="main-nav__link">Home</a>
</li>
<li class="main-nav__item">
<a href="#" class="main-nav__link">About</a>
</li>
<li class="main-nav__item">
<a href="#" class="main-nav__link">Contact</a>
</li>
</ul>
</nav>
Bahwa bentuk dari elemen html diatas dari cara penulisan atau penamaan class yang terlihat terhubung merupakan pola dari BEM. Apa itu BEM?, kita akan membahasnya secara singkat.
Apa itu BEM?
BEM sendiri adalah singkatan dari Block Element dan Modifier, yang merupakan suatu pola penamaan class pada elemen html yang terstruktur.
BEM bukan suatu framework ataupun library, tapi hanya metodologi. BEM dirancang untuk membantu dalam memodulasi struktur dengan memecah komponen menjadi blok yang berisi elemen dan dapat dimodifikasi.
Dalam memberi nama untuk mengidentifikasi element html kita hanya bisa menggunakan Class, tidak bisa menggunakan ID. Setiap elemen hanya boleh bergantung pada komponen block atau class induk, meskipun blok itu merupakan bagian dari blok lain.
BEM mencakup tiga bagian, sesuai kepanjangan dari BEM itu sendiri:
Block: Merupakan class atau komponen induk dari element yang didefinisikan.
Contoh:
<nav class="main-nav"> ... </nav>
Element: Bagian dari komponen induk. Element yang berada di dalam block dengan nama class yang mengikutsertakan nama class element induk dan menggunakan dua garis bawah yang menghubungkan kedua class.
Contoh:
<ul class="main-nav__list"> ... </ul>
Modifier: Memodifikasi atau mengubah gaya tampilan block atau element dengan menambahkan dua tanda hubung dibelankang class.
Contoh:
<li class="main-nav__item--hover"> ... </li>
Dengan BEM kita tidak perlu menggunakan beberapa class css dalam satu selektor; tanpa menggunakan turunan.
Berikut contoh penulisan css dari nav diatas.
.main-nav{}
.main-nav__list {}
.main-nav__item {}
.main-nav__link{}
.main-nav__item--hover{}
Contoh Lain:
<button class="btn btn--primary">Edit</button>
<button class="btn btn--primary">Delete</button>
<style>
.btn {
display: inline-block;
}
.btn--primary {
color: blue;
}
.btn--primary {
color: red;
}
</style>
Contoh kombinasi BEM dengan SASS:
<div class="posts">
<ul class="list">
<li class="list__item">
<h2 class="list__title"></h2>
<p class="list__description"></p>
</li>
</ul>
</div>
.posts {
&__list {
&__item {
}
&__title {
}
&__description {
}
}
}
Adapun manfaat atau keuntungan ketika kita menggunakan BEM. Html dan css kita akan lebih terstuktur, mudah dibaca, dan fleksibel. Dalam menentukan nama class juga bisa sangat mudah, dan dapat menghilangkan penulisan css yang bersarang.
Sebagai contoh:
//penulisan bersarang
.nav .nav-list .nav-item .nav-link { ... }
//bem
.nav__link { ... }
BEM cukup poluler, layak untuk di coba dan digunakan.