Форум

Методология

Инструментарий

Платформа

Сообщество

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

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

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

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

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

menu-item-visible или menuItemVisible

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

БЭМ-методология предоставляет идею по созданию правил формирования имен и свой способ ее реализации — соглашение по именованию CSS-селекторов. Однако в мире веб-разработки существует ряд альтернативных схем, основанных на принципах БЭМ.

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

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

Правила формирования имен:

Имя блока

Имя блока формируется по схеме block-name и задает пространство имен для элементов и модификаторов.

Иногда к именам блоков могут добавляться различные префиксы. Подробнее о нашем опыте использования префиксов рассказывается в статье История создания БЭМ.

Пример

menu

lang-switcher

HTML

<div class="menu">...</div>

CSS

.menu { color: red; }

Имя элемента

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

Полное имя элемента создается по схеме:

block-name__elem-name

Если блок имеет несколько одинаковых элементов, как в случае пунктов меню, то все они будут иметь одинаковые имена menu__item.

Важно! В методологии БЭМ не существует элементов элементов.

Пример

menu__item

lang-switcher__lang-icon

HTML

<div class="menu">
  ...
  <span class="menu__item"></span>
</div>

CSS

.menu__item { color: red; }

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

Пространство имен, заданное именем блока, определяет принадлежность модификатора к данному блоку или его элементу. Имя модификатора отделяется от имени блока или элемента одним подчеркиванием (_).

Полное имя модификатора создается по схеме:

  • Для булевых модификаторов — owner-name_mod-name.
  • Для модификаторов вида «ключ-значение» — owner-name_mod-name_mod-val.

Важно! В методологии БЭМ модификатор не может использоваться в отрыве от своего владельца.

Модификатор блока

  • Булевый модификатор.

Значение такого модификатора не указывается. Полное имя создается по схеме:

block-name_mod-name.

Пример

menu_hidden

  • Модификатор типа «ключ — значение».

Значение модификатора отделяется от имени одним подчеркиванием (_). Полное имя создается по схеме:

block-name_mod-name_mod-val.

Пример

menu_theme_morning-forest

HTML

<div class="menu menu_hidden">...</div>
<div class="menu menu_theme_morning-forest">...</div>

Неверная форма записи

<div class="menu_hidden">...</div>

В данном случае в записи отсутствует сам блок, на который влияет модификатор.

CSS

.menu_hidden { display: none }
.menu_theme_morning-forest { color: green; }

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

  • Булевый модификатор.

Значение такого модификатора не указывается. Полное имя создается по схеме:

block-name__elem-name_mod-name.

Пример

menu__item_visible

  • Модификатор типа «ключ — значение».

Значение модификатора отделяется от имени одним подчеркиванием (_). Полное имя создается по схеме:

block-name__elem-name_mod-name_mod-val.

Пример

menu__item_type_radio

HTML

<div class="menu">
  ...
  <span class="menu__item menu__item_visible menu__item_type_radio"></span>
</div>

CSS

.menu__item_type_radio { color: blue; }

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

Реализация формы аутентификации в HTML и CSS:

HTML

<form class="form form_login form_theme_forest">
  <input class="form__input">
  <input class="form__submit form__submit_disabled">
</form>

CSS

.form {}
.form_theme_forest {}
.form_login {}
.form__input {}
.form__submit {}
.form__submit_disabled {}

Альтернативные схемы именования

Существуют альтернативные решения, основанные на соглашении по именованию БЭМ.

Стиль Two Dashes

block-name__elem-name--mod-name

  • Имена записываются в нижнем регистре.
  • Для разделения слов в именах БЭМ-сущностей используется дефис (-).
  • Имя элемента отделяется от имени блока с помощью двух подчеркиваний (__).
  • Булевые модификаторы отделяются с помощью двух дефисов (--).
  • Модификаторы вида «ключ-значение» не используются.

Важно! Двойной дефис внутри комментария (--) воспринимается как часть комментария и соответственно его наличие приводит к ошибке при валидации документа. HTML5 Спецификация

Стиль CamelCase

MyBlock__SomeElem_modName_modVal

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

Стиль без подчеркиваний

blockName-elemName--modName--modVal

  • Для записи имен используется CamelCase.
  • Имя элемента отделяется от имени блока с помощью одного дефиса (-).
  • Для отделения модификатора используется два дефиса (--).
  • Значение модификатора отделяется от его имени с помощью двух дефисов (--).

Важно! Двойной дефис внутри комментария (--) воспринимается как часть комментария и соответственно его наличие приводит к ошибке при валидации документа. HTML5 Спецификация

Стиль No-namespace

_available

Основное отличие данного стиля в отсутствии имени блока и/или элемента перед модификатором. Такая схема накладывает ограничения на использование миксов, так как не дает возможности определить, к какому блоку/элементу относится модификатор.

Какой стиль выбрать

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

Помимо этого, БЭМ-методология не ограничивается использованием технологий HTML и CSS, рассмотренных в этом документе. Понятия блоков, элементов и модификаторов применяются при работе с JavaScript, шаблонами и файловой структурой БЭМ-проекта. Инструмент bem-naming позволяет применять одинаковые имена БЭМ-сущностей во всех используемых технологиях реализации.

По умолчанию bem-naming содержит настройки соглашения по именованию, предложенного методологией, но позволяет добавлять правила для использования альтернативных схем.

Если вы заметили ошибку или хотите чем-то дополнить статью, вы всегда можете или написать нам об этом на Гитхабе, или поправить статью с помощью prose.io.