BEM (Block-Element-Modifier) - компонентный подход к веб-разработке. В его основе лежит принцип разделения интерфейса на независимые блоки. Он позволяет легко и быстро разрабатывать интерфейсы любой сложности, называя классы CSS в следующей методологии:

/* Block component */
.card {}

/* Elements are dependent on their parent block */ 
.card__img {}

/* Modifiers are for incremental style changes */
.card--dark {} 
.card__img--large {}

1. Блок: независимый компонент, который можно использовать повторно (например, с именем класса .nav)
2. Элемент: дочерний элемент в блоке, который нельзя использовать отдельно от этого блока (например, с именем класса .nav__item)
3. Модификатор: изменение стиля блока или модификатора (например, с именем класса .nav--dark)

Блоки

Блоки являются повторно используемыми компонентами. Когда вы называете свои блоки, сосредоточьтесь на описании их цели (то есть, что это такое), а не ее состояния (то есть как это выглядит).

Название блока характеризует смысл («что это?» — «меню»: menu, «кнопка»: button), а не состояние («какой, как выглядит?» — «красный»: red, «большой»: big). 

<!-- INCORRECT -->


<div class="large-red-box">
 <img src="...">
 <h2>...</h2>
 <p>...</p>
 <a>...</a>
</div>

<style>
 .large-red-box {}
</style>

<!-- CORRECT -->


<div class="card">
 <img src="...">
 <h2>...</h2>
 <p>...</p>
 <a>...</a>
</div>

<style>
 .card {}
</style>

Элементы

Элементы - составная часть блока. Элементы зависят от их родительского блока и поэтому не могут использоваться без них. Название элемента характеризует смысл («что это?» — «пункт»: item, «текст»: text), а не состояние («какой, как выглядит?» — «красный»: red, «большой»: big). 

Они также имеют уникальное соглашение об именах классов CSS, которое работает следующим образом:

.block__element

Например, при использовании .card компонента, элемент внутри (например, изображение) будет иметь имя класса, например .card__img.

К имени элемента всегда добавляется имя блока, разделенное двойным подчеркиванием __.

<!-- INCORRECT -->


<div class="card">
 <img src="...">
 <h2>...</h2>
 <p>...</p>
 <a>...</a>
</div>

<style>
 .card {}
 .card img {}
 .card h2 {}
 .card p {}
 .card a {}
</style>

<!-- CORRECT -->

<div class="card">
 <img class="card__img" src="...">
 <h2 class="card__title" >...</h2>
 <p class="card__description" >...</p>
 <a class="card__button">...</a>
</div>

<style>
 .card {}
 .card__img {}
 .card__title {}
 .card__description {}
</style>

Важно отметить, что второй фрагмент кода избегает использования более 1 селектора для выбора стилей (например, например .card img {}).

Рекомендуется использовать класс элементов BEM и использовать его непосредственно (например .card__img {}) - это снижает вероятность возникновения каскадных проблем в будущем.

Модификаторы

Когда у вас есть разные стили в блоках (или элементах), там появляются модификаторы. Это сущность, определяющая внешний вид, состояние или поведение блока либо элемента. 

Название модификатора характеризует внешний вид («какой размер?», «какая тема?» и т. п. — «размер»: size_s, «тема»: theme_islands), состояние («чем отличается от прочих?» — «отключен»: disabled, «фокусированный»: focused) и поведение («как ведет себя?», «как взаимодействует с пользователем?» — «направление»: directions_left-top).

Модификаторы имеют уникальное соглашение по именованию CSS, которое работает следующим образом:

block--modifier или block__element--modifier.

Модификаторы BEM могут применяться как к блокам, так и к элементам.

<!-- INCORRECT -->

<div class="card--dark">
 <img src="...">
 <h2 class="card__title--large">...</h2>
 <p>...</p>
 <a>...</a>
</div>

<style>
 .card--dark {}
 .card__title--large {}
</style>

Считается плохой практикой использовать класс-модификатор изолированно (т.е. без класса блока или элемента). Потому, что модификатор предназначен для добавления постепенных изменений стиля в блок.

Поэтому всякий раз, когда используется модификатор, убедитесь, что он используется с базовым классом:

<!-- CORRECT -->


<div class="card card--dark">
 <img src="...">
 <h2 class="card__title card__title--large">...</h2>
 <p>...</p>
 <a>...</a>
</div>

<style>
 .card {}
 .card--dark {}
 .card__title {}
 .card__title--large {}
</style>

Это основные принципы, которые помогут вам начать работать с BEM.

Источник перевода