Berkenalan Dengan Metodologi BEM

Hai Coders yang budiman… :D Kali ini saya akan menjelaskan sedikit tentang metodologi BEM. BEM yang saya maksud disini bukan Badan Eksekutif Mahasiswa, melainkan Arsitektur CSS atau pola penulisan CSS.

Lalu Apa itu Metodologi BEM?

BEM atau kepanjangan dari block, element dan modifier sendiri di kembangkan oleh Yandex pada tahun 2009. BEM sendiri lebih merujuk ke penamaan class css. Jika kalian pernah mengunduh template dan menemukan nama class dengan stuktur seperti page-footer__section atau page-footer__section — white, maka itu adalah cara penamaan class dengan menggunakan BEM.

Apa itu block, element dan modifier?

Block adalah container atau context di mana element itu menemukan dirinya sendiri. Anggap ini sebagai potongan dari struktural besar kode anda. Anda mungkin memiliki header, footer, sidebar dan area main content; Masing-masing akan dianggap sebagai block.

Element adalah bagian dari block. Block adalah keseluruhannya dan bagian-bagiannya adalah element. Setiap element ditulis setelah block yang dihubungkan oleh dua garis bawah. Contohnya:

.header__logo
.header__navigation
.header__searchbar

Modifier merepresentasikan state lain dari sebuah block. Contohnya jika ada block berupa form yang secara default memiliki theme terang, maka kita bisa mendefinisikan form bertema gelap sebagai state lain dari block dengan memodifikasi style dasarnya. Contohnya:

.form__username — light
.form__username — grey
.form__username — large

Apa keuntungan memakai Metodologi BEM?

1. Bisa menghindari penggunaan important. Jika kita menginginkan perubahan pada suatu element, maka gunakan lah modifier. Misal: modal-login__title — red, daripada di css membuat class baru, lalu override dengan: color: red !important.
2. Mudah untuk pengembangan. Tanpa dokumentasi, kita akan mengetahui selector mana styling mana
3. Menghindari penggunaan id.
4. Menghindari membuat selector langsung ke element.

Demikian sedikit penjelasan tentang Metodologi BEM. Seperti yang bisa anda lihat, masih banyak lagi yang bisa dijelajahi. BEM adalah sistem yang selalu berkembang yang memungkinkan anda untuk memberikan kejelasan pada kode anda dan membantu anda mendefinisikan dan menetapkan hierarki dengan lebih baik pada pengembangan front-end anda.

Terima Kasih.. :D

Referensi:
1. https://webdesign.tutsplus.com/id/articles/an-introduction-to-the-bem-methodology--cms-19403
2. https://medium.com/@mjtweaver/css-architecture-bemcss-block-element-modifier-e642bd0f4218