Skip to main content

БЭМ-методология

Docs

Методология по наименованию css-классов относительно принадлежности по сложенности и уникальности.

Селекторы по БЭМ:

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

Синтаксис БЭМ (именование css-классов)​

  • user - БЛОК.
  • user__name - ЭЛЕМЕНТ БЛОКА.
  • user--background - МОДИФИКАТОР БЛОКА.
  • user__role--underline - МОДИФИКАТОР ЭЛЕМЕНТА БЛОКА.
<!-- БЛОК 1 -->
<section class="user">
  <h2 class="user__name">Иван Иванов</h2>

  <b class="user__role">Разработчик</b>
</section>

<!-- БЛОК 2 -->
<section class="user user--background">
  <h2 class="user__name">Иван Иванов</h2>

  <b class="user__role user__role--underline">Разработчик</b>
</section>

<!-- БЛОК 3 -->
<div class="block">
  <div class="block__element"></div>
  <div class="block__element--big"></div>
  <div class="block__element--red"></div>
</div>

Основные принципы БЭМ:​

  • Минимум тегов без классов
  • Каскадность свести к минимуму
  • Блок независим от окружения (может быть размещён в любой части страницы и не сломается при этом).
  • У разных блоков не должно быть общих классов (и в CSS — не группируем общие правила, а копируем их).
  • У одного блока (элемента) может быть несколько модификаторов.
  • Осторожно используем дочерний селектор (>), последовательность (+), псевдоклассы (:nth-child).

БЛОК​

  1. Имя класса должно отвечать на вопрос «Зачем нужен этот блок?» (а не описывать его внешний вид).
  2. Сложные блоки собираем из простых. Только если нужный блок нельзя собрать из уже готовых (или получить модификацией готовых), создаём новый блок.
  3. Блок независим от окружения (может быть размещён в любой части страницы и не сломается при этом).
  4. У разных блоков не должно быть общих классов (и в CSS — не группируем общие правила, а копируем их). Примеры: «шапка» сайта, кнопка, главная навигация, пагинация, запись в блоге, блок товара в списке товаров.
  5. Блоки внутри блоков - обычное дело, селектор у нового блока может не описывать вложенность

ЭЛЕМЕНТ​

  1. Это часть блока, которая вне этого блока не имеет смысла и не может быть использована.
  2. CSS-класс элемента формируется так: класс-блока__класс-элемента
  3. Могут отсутствовать (часть элементов не являются обязательными, в блоке может не быть элементов).
  4. Примеры: пункты основной навигации, заголовочная часть записи в блоге, ссылка пагинации. Нет, тольно внутри родителя — это элемент.
  5. Частая ошибка: в имени элемента пишут два сегмента __. Не надо так.
<!-- Неправильно -->
<div class="block__element1__element2"> 

<!-- Праильно -->
<div class="block__element1"> 
<div class="block__element2">
  1. В БЭМ плоская структура Блок → Элемент, максимально независимая от разметки.

МОДИФИКАТОР​

  1. Дополнительный класс, изменяющий внешний вид блока (или элемента, если добавлен к элементу).
  2. CSS-класс модификатора формируется так: класс-блока--название-модификатора.
  3. Даёт возможность блокам выглядеть по-разному на разных страницах или в разных частях страницы.
  4. Классы-модификаторы не используются без тех классов, которые они модифицируют.
  5. Пример правильного нейминга:
<!-- Неправильно -->
<div class="header_big"> 

<!-- Праильно -->
<div class="header header_big">
  1. У одного блока (элемента) может быть несколько модификаторов.
  2. Можно модифицировать элементы от модификатора блока (это делает код неочевидным!).
  3. Избегайте модифицировать вложенные блоки от модификатора блока-родителя.

Название модификатора должно характеризовать:

  • внешний вид — «размер»: size_s, «тему»: theme_island;
  • состояние — «отключён»: disabled, «фокусированный»: focused;
  • поведение — «направление»: directions_left-top.

Применение​

/* блок */
.button { ... }

/* элементы */
.button__capture { ... }
.button__icon { ... }

/* модификаторы */
.button__size_big { ... }
.button__active_disabled { ... }
.button__capture_red { ... }
.button__capture_green { ... }