Най-доброто въведение в BEM е от Хари Робъртс:
BEM - означава блок, елемент, модификатор - е методология за именуване отпред, измислена от момчетата в Yandex. Това е интелигентен начин за именуване на вашите CSS класове, за да им придадете повече прозрачност и значение за други разработчици. Те са далеч по-строги и информативни, което прави конвенцията за наименования BEM идеална за екипи от разработчици на по-големи проекти, които може да продължат известно време.
От Sass 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` */ ) ) )Докато правилата на CSS са кратки и базовият селектор е прост, четливостта остава добре. Но когато нещата станат по-сложни, този синтаксис затруднява разбирането на случващото се. Поради това може да се изкушим да изградим две комбинации от обвивки за нашия 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; ) )Пренаписване на предишния ни пример с нашите чисто нови комбинации:
.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` */ ) ) )