Nejlepší úvod do BEM je od Harryho Robertsa:
BEM - což znamená blok, prvek, modifikátor - je front-endová metodika pojmenování, kterou vymysleli kluci v Yandexu. Jedná se o chytrý způsob pojmenování vašich tříd CSS, který jim poskytne větší transparentnost a význam pro ostatní vývojáře. Jsou mnohem přísnější a informativní, díky čemuž je konvence pojmenování BEM ideální pro týmy vývojářů na větších projektech, které mohou chvíli trvat.
Od verze Sass 3.3 můžeme psát takovéhle věci:
.block ( /* CSS declarations for `.block` */ &__element ( /* CSS declarations for `.block__element` */ ) &--modifier ( /* CSS declarations for `.block--modifier` */ &__element ( /* CSS declarations for `.block--modifier__element` */ ) ) )Pokud jsou pravidla CSS krátká a selektor základny jednoduchý, čitelnost zůstává v pořádku. Ale když se věci stanou složitějšími, tato syntaxe znesnadní zjistit, co se děje. Z tohoto důvodu bychom mohli být v pokušení vytvořit dva souhrnné mixiny pro naši BEM syntaxi:
/// 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; ) )Přepisování našeho předchozího příkladu na naše zbrusu nové mixiny:
.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` */ ) ) )Uvědomte si, že uvozovky kolem řetězců jsou volitelné, přidáváme je pouze pro lepší čitelnost.
Nyní, pokud máte pocit elementa modifierjste příliš dlouho na psaní, můžete vytvořit dva kratší aliasy takto:
/// @alias element @mixin e($element) ( @include element($element) ( @content; ) ) /// @alias modifier @mixin m($modifier) ( @include modifier($modifier) ( @content; ) )Používání 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` */ ) ) )