Skip to content

Latest commit

 

History

History
162 lines (106 loc) · 8.45 KB

naming-convention.ru.md

File metadata and controls

162 lines (106 loc) · 8.45 KB
Raw

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

Имя БЭМ-сущности уникально. Во всех технологиях (CSS, JavaScript, HTML) одна и та же БЭМ-сущность всегда называется одинаково. Основная идея соглашения по именованию — вложить смысл в имена и сделать их максимально информативными для разработчика.

Можно сравнить одно и то же имя CSS-селектора, написанное разными способами:

  • menuitemvisible
  • menu-item-visible
  • menuItemVisible

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

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

block-name__elem-name_mod-name_mod-val

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

Важно! В методологии БЭМ не существует элементов элементов. Правила именования запрещают создавать элементы элементов, но в DOM-дереве элементы можно вкладывать друг в друга.

Примеры

В HTML БЭМ-сущности представлены атрибутом class. В БЭМ во всех технологиях происходит обращение к классу:

Примеры правил формирования имен приведены на CSS.

Имя блока

menu

Почему префиксы в именах блока не нужны?

HTML

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

CSS

.menu { color: red; }

Имя элемента

menu__item

Важно! Имена одинаковых элементов одного и того же блока совпадают. Например, все пункты в блоке меню называются menu__item.

HTML

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

CSS

.menu__item { color: red; }

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

menu_hidden
menu_theme_islands

HTML

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

CSS

.menu_hidden { display: none; }
.menu_theme_islands { color: green; }

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

menu__item_visible
menu__item_type_radio

HTML

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

CSS

.menu__item_visible {}
.menu__item_type_radio { color: blue; }

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

Описанные выше правила формирования имен — это классическая схема именования БЭМ-сущностей. Все инструменты БЭМ по умолчанию настроены на классическую схему.

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

Стиль Two Dashes

block-name__elem-name--mod-name--mod-val

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

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

Стиль CamelCase

blockName__elemName_modName_modVal

  • Имена записываются латиницей.
  • Каждое слово внутри имени пишется с заглавной буквы.
  • Разделители элементов и модификаторов совпадают с классической схемой.

Стиль React

BlockName-ElemName_modName_modVal

  • Имена записываются латиницей.
  • Имена блоков и элементов пишутся с заглавной буквы. Имена модификаторов — со строчной.
  • Каждое слово внутри имени пишется с заглавной буквы.
  • Имя элемента отделяется от имени блока одним дефисом (-).
  • Разделители имени и значения модификаторов совпадают с классической схемой.

Стиль No-namespace

_available

  • Имена записываются латиницей.
  • Имя блока или элемента перед модификатором не указывается.

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

Ваша схема именования

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