БЭМ

Блок Элемент Модификатор

Официальный сайт

Автор: Яндекс

Блок

Блок — это независимый "кирпичик", из которого состоит интерфейс.

Блок может состоять из других блоков

Блок можно свободно перемещать в пределах одной или нескольких страниц

В интерфейсе может одновременно присутствовать несколько экземпляров одного и того же блока

Элемент

Часть блока, которая не может существовать в отрыве от самого блока.

Модификатор

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

Соглашение по именованию

Основная идея соглашения по именованию — сделать имена CSS-селекторов интуитивно понятными.

—  block-name__elem-name_mod-name

—  block-name__elem-name_mod-name_mod-val

—  block-name__elem-name--mod-name

—  nameMyBlock__SomeElem_modName_modVal

—  др

Варианты:

Микс

Способ использования разных БЭМ-сущностей на одном элементе.

Миксы позволяют совмещать возможности блоков, элементов и модификаторов без дублирования кода.