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.

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