Лучшее введение в БЭМ от Гарри Робертса:
БЭМ - что означает блок, элемент, модификатор - это методология внешнего именования, придуманная ребятами из Яндекс. Это разумный способ присвоения имен вашим классам CSS, чтобы сделать их более прозрачными и значимыми для других разработчиков. Они гораздо более строгие и информативные, что делает соглашение об именах БЭМ идеальным для команд разработчиков, работающих над более крупными проектами, которые могут длиться некоторое время.
Начиная с 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 короткие, а базовый селектор простой, удобочитаемость остается хорошей. Но когда ситуация становится более сложной, этот синтаксис затрудняет понимание того, что происходит. Из-за этого у нас может возникнуть соблазн создать два миксина-оболочки для нашего БЭМ-синтаксиса:
/// 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` */ ) ) )