BEM CSS Naming Convention

Posted by

Pada dasarnya setiap developer memiliki caranya masing-masing dalam merancang css untuk website-nya masing-masing, namun tidak bisa dipungkiri dalam pengerjaan sebuah website kita bekerja bersama dengan tim kita. Dan hal lain yang juga pelu di pertimbangkan adalah bahwa website yang kita bangun semakin lama akan semakin kompleks, sering kali jika ada style yang ingin kita terapkan pada komponen atau bagian yang spesifik kita memanfaatkan !important, namun itu hanya akan membuat design css kita menjadi terlihat buruk. Oleh karena itu perlu membuatnya se modular dan semudah mungkin untuk dipahami agar jika ada pengembangan dapat dilakukan dengan mudah.

Dari pernyataan diatas saya simpulkan bahwa, mengapa perlu css architecture :

  1. Maintain css pada proyek besar
  2. Perubahan satu elemen tidak mengganggu elemen lain
  3. Mengurangi pemakaian  “!important
  4. Dapat memposisikan element dengan mudah

BEM atau Block Element Modifier merupakan salah satu solusi untuk menangani hal tersebut. BEM merupakan naming convention class pada css.

B – Block
E – Block__Element
M- Element—Modifire
BEM – Block__Element—Modifire

.site-search {} /* Block */
.site-search__field {} /* Element */
.site-search--full {} /* Modifier */

Sebelum kita membahas BEM secara lebih mendalam kita perlu tahu tujuan dari BEM, BEM dibuat untuk menghindari legacy css dan membuat css menjadi:

  • Maintainable
  • Easy Tracking
  • Modular
  • Flexible
  • Support Partial Load
  • Cocok dengan component base framework seperti react, Vue, dll
  1. Block
    Block merupakan parent class yang independen dan tidak bergantung dengan blok lain. Tidak ada penamaan khusus pada block namun pada umumnya agar lebih spesifik dan tidak ambigu penamaan block harus simpel, memiliki arti, dan merepresentasikan fungsinya dan dimana dia diletakkan pada page
    Contoh : Header, navigation, tabs, footer, menu, dll
  2. Element
    Element merupakan child dari block, bagian2 dari block disebut sebagai element. Element bergantung pada Block dan tidak dapat berdiri sendiri. Element selalu didalam block dan untuk penamaan element digunakan dua underscore (__) sebagai pemisah antara block dan elemen.Jadi, misalnya jika kita menggunakan block .footer, kita akan menuliskan element seperti berikut

    .footer{} /*Block*/
    .footer__title{} /*Element*/
    .footer__brand{} /*Element*/
     
    /*With Less Css Preprocessor*/
    .footer{
    &__title{}
     	&__brand}{}
    }
    
  3.  Modifire
    Modifier merupakan state yang merubah behavior atau penampilan dari Block atau Element. Modifire pasti bergantung pada element maupun block, untuk penamaan modifier digunakan dua dash (–) sebagai pemisah. Sebagai contoh :
.footer{}
.footer--dark{}
.footer__title--small{}
 
/*With Less Css Preprocessor*/
.footer{
  &--dark{}
    &__title{
        &--small{}
  }
}

Kita sudah mengetahui gambaran singkat penggunaan Block, Element, dan Modifier. Dengan naming convention tersebut, kita dapat mempermudahnya dengan menggunakan css preprocessor seperti less/ sass, dll.
Contoh apabila kita menggunakan less adalah sebagai berikut:

HTML

<form class=”contactForm”>
  <input class=”contactForm__input” type=”text”      placeholder=”Name”>
  <input class=”contactForm__input” type=”email” placeholder=”Email”>
  <input class=”contactForm__input contactForm__input--large” type=”text” placeholder=”Name”>
  <input class=”contactForm__submit” type=”submit” value=”Go”>
</form>

SCSS

.contactForm {
  &__input {
  display: block;
  padding: 10px 20px;
  border: 1px solid #333333;
  color: #000000;
  &--large {
   	padding: 30px 20px;
  }
  }
  &__submit {
  display: inline-block;
  background: #ff0000;
  color: #ffffff;
  }
}

Compiled CSS

.contactForm__input {
  display: block;
  padding: 10px 20px;
  border: 1px solid #333333;
  color: #000000;
}

.contactForm__input--large {
  padding: 30px 20px;
}

.contactForm__submit {
  display: inline-block;
  background: #ff0000;
  color: #ffffff;
}

 

Reference

https://medium.com/mazipan-mind/redefine-your-css-with-bem-e75714b71f2e

Share to
  • 4
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    4
    Shares
  • 4
    Shares

Leave a Reply

Your email address will not be published. Required fields are marked *