Форум

Методологія

Інструментарій

Платформа

Спільнота

Угода щодо іменування

Для роботи з БЕМ-сутностями необхідно ознайомитися з правилами їх іменування.

Основна ідея угоди щодо іменування — зробити імена 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.