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

Методология БЭМ (Блок, Элемент, Модификатор) - создана компанией Яндекс. В её основе лежит принцип разделения интерфейса на независимые блоки. Он позволяет легко и быстро разрабатывать интерфейсы любой сложности и повторно использовать существующий код.

Полная документация: https://ru.bem.info/

Блок

Функционально независимый компонент страницы, который может быть повторно использован. В HTML блоки представлены атрибутом class.

Особенности:

• Название блока характеризует смысл («что это?» — «меню»: menu, «кнопка»: button), а не состояние («какой, как выглядит?» — «красный»: red, «большой»: big).
• Блок не должен влиять на свое окружение, т. е. блоку не следует задавать внешнюю геометрию (в виде отступов, границ, влияющих на размеры) и позиционирование.
• В CSS по БЭМ также не рекомендуется использовать селекторы по тегам или id.
• Блоки можно вкладывать друг в друга.
• Допустима любая вложенность блоков.

Таким образом обеспечивается независимость, при которой возможно повторное использование или перенос блоков с места на место.

Элемент

Составная часть блока, которая не может использоваться в отрыве от него.

Особенности:

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

Вложенность

• Элементы можно вкладывать друг в друга.
• Допустима любая вложенность элементов.
• Элемент — всегда часть блока, а не другого элемента. Это означает, что в названии элементов нельзя прописывать иерархию вида block__elem1__elem2

Принадлежность

Элемент — всегда часть блока и не должен использоваться отдельно от него.

Необязательность

Элемент — необязательный компонент блока. Не у всех блоков должны быть элементы.

Когда создавать блок, когда — элемент?

Создавайте блок, если фрагмент кода может использоваться повторно и не зависит от реализации других компонентов страницы.

Создавайте элемент, если фрагмент кода не может использоваться самостоятельно, без родительской сущности (блока).

Исключение составляют элементы, реализация которых для упрощения разработки требует разделения на более мелкие части — подэлементы. В БЭМ-методологии нельзя создавать элементы элементов. В подобном случае вместо элемента необходимо создавать служебный блок.

Модификатор

Cущность, определяющая внешний вид, состояние или поведение блока либо элемента.

Особенности:

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

Типы модификаторов

Булевый

• Используют, когда важно только наличие или отсутствие модификатора, а его значение несущественно. Например, «отключен»: disabled. Считается, что при наличии булевого модификатора у сущности его значение равно true.
• Структура полного имени модификатора соответствует схеме:имя-блока_имя-модификатора;
• имя-блока__имя-элемента_имя-модификатора.

Пример

<!-- Блок `search-form` имеет булевый модификатор `focused` -->
<form class="search-form search-form_focused">
    <input class="search-form__input">

    <!-- Элемент `button` имеет булевый модификатор `disabled` -->
    <button class="search-form__button search-form__button_disabled">Найти</button>
</form>

Ключ-значение

• Используют, когда важно значение модификатора. Например, «меню с темой оформления islands»: menu_theme_islands.
• Структура полного имени модификатора соответствует схеме:имя-блока_имя-модификатора_значение-модификатора;
• имя-блока__имя-элемента_имя-модификатора_значение-модификатора.