Форум

Методология

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

Платформа

Сообщество

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

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

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

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

Добавим разделитель или каждое слово внутри фразы напишем с заглавной буквы (классический стиль CamelCase):

  • 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_islands

    HTML

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

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

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

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

    CSS

    .menu_hidden { display: none }
    .menu_theme_islands { 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.