Pengenalan terbaik untuk BEM adalah dari Harry Roberts:
BEM - bermaksud blok, elemen, pengubah - adalah metodologi penamaan depan yang difikirkan oleh lelaki di Yandex. Ini adalah cara bijak menamakan kelas CSS anda untuk memberi mereka lebih banyak ketelusan dan makna kepada pembangun lain. Mereka jauh lebih ketat dan bermaklumat, yang menjadikan konvensyen penamaan BEM sesuai untuk pasukan pemaju pada projek yang lebih besar yang mungkin berlangsung lama.
Sejak Sass 3.3, kami dapat menulis perkara 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` */ ) ) )Selagi peraturan CSS pendek dan pemilih asas mudah, kebolehbacaan tetap baik. Tetapi apabila keadaan menjadi lebih kompleks, sintaks ini menjadikannya sukar untuk mengetahui apa yang berlaku. Oleh kerana itu, kami mungkin tergoda untuk membina dua bungkus campuran untuk sintaks BEM kami:
/// 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; ) )Tulis semula contoh 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 bahawa petikan di sekitar rentetan adalah pilihan, kami hanya menambahkannya untuk pembacaan tambahan.
Sekarang, jika anda rasa suka elementdan modifierterlalu panjang untuk menaip, anda boleh membuat dua alias yang lebih pendek seperti itu:
/// @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` */ ) ) )