Најбољи увод у БЕМ је Харри Робертс:
БЕМ - што значи блок, елемент, модификатор - је фронт-енд методологија именовања коју су осмислили момци из Иандек-а. То је паметан начин именовања ЦСС класа како бисте им дали већу транспарентност и значење другим програмерима. Они су далеко строжи и информативнији, што БЕМ конвенцију о именовању чини идеалном за тимове програмера на већим пројектима који би могли трајати неко време.
Од Сасс 3.3, можемо писати ствари попут ове:
.block ( /* CSS declarations for `.block` */ &__element ( /* CSS declarations for `.block__element` */ ) &--modifier ( /* CSS declarations for `.block--modifier` */ &__element ( /* CSS declarations for `.block--modifier__element` */ ) ) )Све док су ЦСС правила кратка, а основни бирач једноставан, читљивост остаје у реду. Али када ствари постану сложеније, ова синтакса отежава откривање шта се догађа. Због овога бисмо могли доћи у искушење да направимо два микса омотача за нашу БЕМ синтаксу:
/// 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; ) )Преписивање нашег претходног примера са нашим потпуно новим комбинацијама:
.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` */ ) ) )Имајте на уму да цитати око низова нису обавезни, ми их додајемо само ради додатне читљивости.
Сада, ако желите elementи modifierпредуго сте за куцање, можете да направите два краћа псеудонима на такав начин:
/// @alias element @mixin e($element) ( @include element($element) ( @content; ) ) /// @alias modifier @mixin m($modifier) ( @include modifier($modifier) ( @content; ) )Коришћење псеудонима:
.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` */ ) ) )