BEM Mixins онлайн урок.


Лучшее введение в BEM - от Harry Roberts :

BEM - значение блока, элемента, модификатора - это методология наименования интерфейсов, разработанная ребятами из Яндекса. Это умный способ называть ваши классы 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` */
}
}
}

Обратите внимание, что цитаты вокруг строк являются необязательными, мы добавляем их только для дополнительной удобочитаемости.

Теперь, если вы чувствуете, чтоэлементимодификаторслишком длинны для ввода, вы можете создать два более коротких псевдонима:

/// @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` */
}
}
}