Для работы с БЭМ-сущностями необходимо ознакомиться с правилами их именования.
Основная идея соглашения по именованию — сделать имена CSS-селекторов максимально информативными и понятными. Это поможет упростить разработку и отладку кода, а также решить некоторые проблемы веб-разработчиков.
В качестве примера рассмотрим CSS-селектор menuitemvisible. Быстрый просмотр такой записи не дает возможности определить типы БЭМ-сущностей по имени.
Добавим разделитель:
menu-item-visible или menuItemVisible
В таком виде имя селектора явно разделяется на логические части. Можем предположить, что menu окажется блоком, item — элементом, а visible — модификатором. Однако в реальной жизни часто возникают более сложные и не столь однозначные случаи, решить которые помогает соглашение по именованию БЭМ.
БЭМ-методология предоставляет идею по созданию правил формирования имен и свой способ ее реализации — соглашение по именованию 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 {}
Существуют альтернативные решения, основанные на соглашении по именованию БЭМ.
Одним из первых, кто заговорил о БЭМ в англоязычном мире, был Гарри Робертс. В своей статье MindBEMding – getting your head ’round BEM syntax он рассказал о соглашении по именованию CSS-классов по БЭМ-методологии. Гарри Робертс предложил свою схему именования, основанную на принципах БЭМ:
block-name__elem-name--mod-name
-).__).--).MyBlock__SomeElem_modName_modVal
Данный стиль отличается от классического использованием CamelCase вместо дефиса для разделения слов в именах БЭМ-сущностей.
blockName-elemName--modName--modVal
-).--).--)._available
Основное отличие данного стиля в отсутствии имени блока и/или элемента перед модификатором. Такая схема накладывает ограничения на использование миксов, так как не дает возможности определить, к какому блоку/элементу относится модификатор.
Методология БЭМ предлагает общие принципы именования БЭМ-сущностей. Выбор схемы именования зависит от требований вашего проекта и личных предпочтений. Использование предложенного методологией соглашения по именованию имеет один существенный плюс — наличие готовых инструментов для разработки, которые ориентируются именно на «классическое именование».
Помимо этого, БЭМ-методология не ограничивается использованием технологий HTML и CSS, рассмотренных в этом документе. Понятия блоков, элементов и модификаторов применяются при работе с JavaScript, шаблонами и файловой системой БЭМ-проекта. Инструмент bem-naming позволяет применять одинаковые имена БЭМ-сущностей во всех используемых технологиях реализации.
По умолчанию bem-naming содержит настройки соглашения по именованию, предложенного методологией, но позволяет добавлять правила для использования альтернативных схем.