Najbolji uvod u BEM je Harry Roberts:
BEM - što znači blok, element, modifikator - prednja je metodologija imenovanja koju su smislili dečki iz Yandexa. To je pametan način imenovanja vaših CSS klasa kako biste im dali više transparentnosti i značenja drugim programerima. Oni su daleko stroži i informativniji, što BEM konvenciju o imenovanju čini idealnom za timove programera na većim projektima koji bi mogli potrajati neko vrijeme.
Od Sass 3.3 možemo pisati stvari poput ove:
.block ( /* CSS declarations for `.block` */ &__element ( /* CSS declarations for `.block__element` */ ) &--modifier ( /* CSS declarations for `.block--modifier` */ &__element ( /* CSS declarations for `.block--modifier__element` */ ) ) )Sve dok su CSS pravila kratka, a osnovni odabir jednostavan, čitljivost ostaje u redu. Ali kad stvari postanu složenije, ova sintaksa otežava doznavanje što se događa. Zbog toga bismo mogli doći u iskušenje da izradimo dvije kombinacije omota za našu BEM sintaksu:
/// 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; ) )Prepisivanje našeg prethodnog primjera s našim potpuno novim kombinacijama:
.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` */ ) ) )Napominjemo da navodnici oko nizova nisu obvezni, mi ih dodajemo samo radi dodatne čitljivosti.
Sada, ako želite elementi modifierpredugo ste za tipkanje, možete stvoriti dva kraća pseudonima poput takvih:
/// @alias element @mixin e($element) ( @include element($element) ( @content; ) ) /// @alias modifier @mixin m($modifier) ( @include modifier($modifier) ( @content; ) )Upotreba pseudonima:
.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` */ ) ) )