Найкраще вступ до BEM - від Гаррі Робертса:
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` */ ) ) )Зверніть увагу, що лапки навколо рядків необов’язкові, ми додаємо їх лише для додаткової читабельності.
Тепер, якщо ви відчуваєте , як 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` */ ) ) )