БЭМ. Соглашения по именованию

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

Основная идея соглашения по именованию — сделать имена CSS-селекторов максимально информативными и понятными. Это поможет упростить разработку и отладку кода, а также решить некоторые проблемы веб-разработчиков.

В качестве примера рассмотрим CSS-селектор

menuitemvisible

Быстрый просмотр такой записи не дает возможности определить типы БЭМ-сущностей по имени.

Добавим разделитель:

menu-item-visible

или

menuItemVisible

В таком виде имя селектора явно разделяется на логические части. Можем предположить, что

menu

окажется блоком,

item

— элементом, а

visible

— модификатором. Однако в реальной жизни часто возникают более сложные и не столь однозначные случаи, решить которые помогает соглашение по именованию БЭМ.

Соглашение по именованию CSS-селекторов

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

Имя блока

Формируется по схеме

block_name

и задает пространство имен для элементов и модификаторов.

Пример

menu

cart_widget

Имя элемента

Пространство имен, заданное именем блока, определяет принадлежность элемента к данному блоку. Имя элемента создается по схеме

block_name-element_name

Важно

• в БЭМ не существует элемента элементов
• если блок имеет несколько одинаковых элементов, например пункты меню, то все они имеют одинаковые имена

Имя модификатора

Для блока строится по схеме

block_name--mod_name

Для элемента по схеме

block_name-element_name--mod_name

Важно

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

Связь DOM-узла с js

Неотъемлемой частью разработки сайта является обработка событий DOM-элементов скриптами.

Для прозрачного, однозначного взаимодействия сложного поведения с DOM-элементом применяются специальные классы построенные по схеме

js-block_name-behavior

или

js-block_name-element_name-behavior

где префикс js указывает, что данный класс используется для привязки скриптов.

Важно

Такие классы используются только для привязки обработчиков событий, использовать их для стилизации нельзя

Такие классы могут использоваться на любом элементе блока. Например, класс js-menu-toggler, привязывающий разворачивание/сворачивание вложенного уровня меню может быть как на кнопке-переключателе, так и на целом узле меню .menu-node.

Пример использования соглашения по именованию