Pengantar terbaik untuk BEM adalah dari Harry Roberts:
BEM - artinya blok, elemen, pengubah - adalah metodologi penamaan front-end yang dipikirkan oleh orang-orang di Yandex. Ini adalah cara cerdas untuk menamai kelas CSS Anda untuk memberi mereka lebih banyak transparansi dan makna bagi pengembang lain. Mereka jauh lebih ketat dan informatif, yang membuat konvensi penamaan BEM ideal untuk tim pengembang pada proyek yang lebih besar yang mungkin berlangsung lama.
Sejak Sass 3.3, kita dapat menulis hal-hal seperti ini:
.block ( /* CSS declarations for `.block` */ &__element ( /* CSS declarations for `.block__element` */ ) &--modifier ( /* CSS declarations for `.block--modifier` */ &__element ( /* CSS declarations for `.block--modifier__element` */ ) ) )Selama aturan CSS pendek dan pemilih dasar sederhana, keterbacaan tetap oke. Tetapi ketika segala sesuatunya menjadi lebih kompleks, sintaksis ini membuat sulit untuk mengetahui apa yang sedang terjadi. Karena itu, kita mungkin tergoda untuk membuat dua mixin pembungkus untuk sintaks BEM kita:
/// Block Element /// @access public /// @param (String) $element - Element's name @mixin element($element) ( &__#($element) ( @content; ) ) /// Block Modifier /// @access public /// @param (String) $modifier - Modifier's name @mixin modifier($modifier) ( &--#($modifier) ( @content; ) )Menulis ulang contoh kami sebelumnya dengan mixin baru kami:
.block ( /* CSS declarations for `.block` */ @include element('element') ( /* CSS declarations for `.block__element` */ ) @include modifier('modifier') ( /* CSS declarations for `.block--modifier` */ @include element('element') ( /* CSS declarations for `.block--modifier__element` */ ) ) )Perhatikan bahwa kutipan di sekitar string adalah opsional, kami hanya menambahkannya agar lebih mudah dibaca.
Sekarang, jika Anda merasa ingin elementdan modifierterlalu panjang untuk mengetik, Anda dapat membuat dua alias yang lebih pendek seperti ini:
/// @alias element @mixin e($element) ( @include element($element) ( @content; ) ) /// @alias modifier @mixin m($modifier) ( @include modifier($modifier) ( @content; ) )Menggunakan alias:
.block ( /* CSS declarations for `.block` */ @include e('element') ( /* CSS declarations for `.block__element` */ ) @include m('modifier') ( /* CSS declarations for `.block--modifier` */ @include e('element') ( /* CSS declarations for `.block--modifier__element` */ ) ) )