UK
Форум

Методологія

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

Платформа

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

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

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

В якості прикладу розглянемо CSS-селектор menuitemvisible. Швидкий перегляд такого запису не дає можливості визначити типи БЕМ-сутностей по імені.

Додамо роздільник:

menu-item-visible або menuItemVisible

У такому вигляді ім'я селектора явно поділяється на логічні частини. Можемо припустити, що menu виявиться блоком, item — елементом, а visible — модифікатором. Однак у реальному житті часто виникають більш складні і не настільки однозначні випадки, вирішити які допомагає угоду щодо іменування БЕМ.

БЕМ-методологія надає ідею по створенню правил формування імен і свій спосіб її реалізації — угода щодо іменування 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; }

Ім'я модифікатора

Простір імен, заданий ім'ям блоку, визначає приналежність модифікатора до цього блоку або його елементу. Ім'я модифікатора відокремлюється від імені блоку або елемента одним підкресленням (_).

Повне ім'я модифікатора створюється за схемою:

Важливо! У методології БЕМ модифікатор не може використовуватися у відриві від свого власника.

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

Значення такого модифікатора не вказується. Повне ім'я створюється за схемою:

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

Важливо! Подвійний дефіс всередині коментаря (--) сприймається як частина коментарю і відповідно її наявність призводить до помилки при валідації документа. HTML5 Специфікація

Стиль No-namespace

_available

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

Який стиль вибрати

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

Крім цього, БЕМ-методологія не обмежується використанням технологій HTML і CSS, розглянутих у цьому документі. Поняття блоків, елементів і модифікаторів застосовуються при роботі з JavaScript, шаблонами і файловою структурою БЕМ-проекту. Інструмент bem-naming дозволяє застосовувати однакові імена БЕМ-сутностей у всіх використовуваних технологіях реалізації.

За замовчуванням bem-naming містить налаштування угоди щодо іменування, запропонованого методологією, але дозволяє додавати правила для використання альтернативних схем.

doc-rating:rate
Повідомити про помилку на Гітхабі або поправити за допомогою prose.io.