Najboljši uvod v BEM je Harry Roberts:
BEM - pomeni blok, element, modifikator - je čelna metodologija poimenovanja, ki so si jo zamislili fantje v Yandexu. To je pameten način poimenovanja razredov CSS, ki jim daje večjo preglednost in pomen drugim razvijalcem. So veliko bolj strogi in informativni, zaradi česar je konvencija o poimenovanju BEM idealna za skupine razvijalcev pri večjih projektih, ki bi lahko trajali nekaj časa.
Od Sass 3.3 lahko pišemo takšne stvari:
.block ( /* CSS declarations for `.block` */ &__element ( /* CSS declarations for `.block__element` */ ) &--modifier ( /* CSS declarations for `.block--modifier` */ &__element ( /* CSS declarations for `.block--modifier__element` */ ) ) )Dokler so pravila CSS kratka in je osnovni izbirnik preprost, je berljivost v redu. Ko pa so stvari bolj zapletene, je zaradi te sintakse težko ugotoviti, kaj se dogaja. Zaradi tega bi nas morda zamikalo zgraditi dve mešanici ovojev za našo sintakso BEM:
/// 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; ) )Prepis prejšnjega primera z našimi popolnoma novimi kombinacijami:
.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` */ ) ) )Citati okoli nizov niso obvezni, dodajamo jih le za dodatno čitljivost.
Zdaj, če se počutite, kot elementin modifierso predolgo na vrsto, si lahko ustvarite dva krajša vzdevke, kot so:
/// @alias element @mixin e($element) ( @include element($element) ( @content; ) ) /// @alias modifier @mixin m($modifier) ( @include modifier($modifier) ( @content; ) )Uporaba vzdevkov:
.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` */ ) ) )