BEM (Block, Element, Modifier) Methodology

BEM adalah ketentuan penamaan untuk class dalam HTML dan CSS. Tujuannya untuk memahami kaitan antara HTML dengan CSS. Dengan ketentuan yang sama, developer yang berbeda bisa lebih memahami CSS yang dibuat developer lain sehingga maintenance lebih mudah. Terhindar dari stress karena penamaan dibuat sesuai selera.


Contoh:

/* Block component */
.btn {}

/* Element that depends upon the block */
.btn__price {}

/* Modifier that changes the style of the block */
.btn--orange {}
.btn--big {}


Alasan kenapa BEM ini bagus untuk diaplikasikan tidak akan saya bahas detail. Saya akan bahas contoh aplikasinya.

See the Pen BEM by pras abdilah (@pras-abdilah) on CodePen.

BEM dan Saas

Karena saya memakai Saas, @at-root dapat dipakai disini.

.block {
  @at-root #{&}__element {
  }
  @at-root #{&}--modifier {
  }
}

Hasilnya:

.block {
}
.block__element {
}
.block--modifier {
}


Bacaan lebih lanjut:

https://css-tricks.com/bem-101/
https://www.sitepoint.com/sass-reference/at-root/