Geriausias BEM įvadas yra iš Harry Robertso:
BEM - reiškiantis bloką, elementą, modifikatorių - yra „front-end“ vardų suteikimo metodika, kurią sugalvojo „Yandex“ vaikinai. Tai protingas būdas pavadinti savo CSS klases, kad suteiktų joms daugiau skaidrumo ir prasmės kitiems kūrėjams. Jie yra kur kas griežtesni ir informatyvesni, todėl BEM vardų suteikimo tvarka yra ideali kūrėjų komandoms didesniuose projektuose, kurie gali trukti kurį laiką.
Nuo „Sass 3.3“ galime rašyti tokius dalykus:
.block ( /* CSS declarations for `.block` */ &__element ( /* CSS declarations for `.block__element` */ ) &--modifier ( /* CSS declarations for `.block--modifier` */ &__element ( /* CSS declarations for `.block--modifier__element` */ ) ) )Kol CSS taisyklės yra trumpos, o bazinis pasirinkimas yra paprastas, skaitomumas išlieka gerai. Bet kai viskas tampa sudėtingesnė, dėl šios sintaksės sunku suprasti, kas vyksta. Dėl šios priežasties galime susigundyti sukurti du „BEM“ sintaksės paketus:
/// 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; ) )Perrašydami ankstesnį pavyzdį naudodami visiškai naujus rinkinius:
.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` */ ) ) )Atkreipkite dėmesį, kad kabutės aplink eilutes yra neprivalomos, jas pridedame tik tam, kad būtų lengviau skaityti.
Dabar, jei jaučiatės elementir modifierper ilgai norite rašyti, galite sukurti dvi trumpesnes slapyvardžius:
/// @alias element @mixin e($element) ( @include element($element) ( @content; ) ) /// @alias modifier @mixin m($modifier) ( @include modifier($modifier) ( @content; ) )Pseudonimų naudojimas:
.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` */ ) ) )