BEM adalah Block Elemen Modifier, jika tim dan proyek kamu komplek dan besar serta telah menggunakan standar ini maka akan semakin memudahkan pengembangan dan perbaikan didepan baik oleh tim yang sama atau tim baru.
Block, Element and Modifier
Sebelum mulai lebih lanjut mari kita mengenal dulu 3 bagian diatas. Berikut jika kita breakdown halaman depan Github https://github.com .
Dari tampilan diatas bisa kita dapatkan beberapa pembagian sebagai berikut :
Blocks
Adalah entitas yang menggambarkan sesuai dengan component yang dimaksud.
Sebagai contoh :
header, menu, checkbox, button dan lain sebagainya.
Dari tampilan diatas didapatkan beberapa kelas block, antara lain :
- .menu (ditujukan untuk blok menu)
- .button (ditujukan untuk seluruh button)
- .input (ditujukan untuk seluruh input)
- dan lain sebagainya
Elements
Bagian dari blok yang tidak memiliki makna sendiri dan terikat dengan block.
Dari tampilan diatas didapatkan beberapa sebagai berikut :
- .menu--item (ditujukan untuk seluruh item didalam blok menu)
- .list--item (ditujukan untuk seluruh item didalam blok list)
- dan lain sebagainya
Modifier
Flag pada blok atau elemen. Gunakan mereka untuk mengubah penampilan atau perilaku.
Dari tampilan diatas didapatkan beberapa sebagai berikut :
- .menu--item-big (membuat item didalam blok menu menjadi besar)
- .list--item-gray (membuat item didalam blok list menjadi abu-abu)
- dan lain sebagainya
Penutup
Dengan menerapkan BEM kamu juga mendapatkan kemampuan untuk mentransfer blok dari proyek Anda yang sudah selesai ke yang baru, secara lebih mudah.
Menulis blok independen dengan cara yang berbeda, dan menggunakannya kembali dengan cerdas, mengurangi jumlah kode CSS yang harus ditulis.
Metodologi BEM memberi Anda kode CSS struktur yang solid yang tetap sederhana dan mudah dipahami.
Ref :