Методологія БЕМ в дії

Методологія БЕМ — одна з найпопулярніших на даний момент, в основі якої лежить домовленість про те, як розбивати інтерфейс на певні незалежні блоки. Розшифровується абревіатура як «Блок Елемент Модифікатор». Цей підхід до web-розробки дозволяє швидко створювати сайти з гнучкою архітектурою. Він знайомий багатьом, хто займається HTML/CSS версткою, але, як на мене, не досить, щоб значно спростити життя і роботу більшості моїх колег.

Навіщо потрібна БЕМ?

Методологія виявилася популярною, оскільки розробка великого порталу повинна відповідати наступним принципам:

• Типові сайти вимагають малих витрат часу для створення;

• Проект повинен існувати тривалий час, підтримуватися і бути зрозумілим різним поколінням розробників;

• Потрібно вміти легко масштабувати команду: на проекті може працювати одна людина, а може десять;

• Всередині команди повинні бути чіткі зони відповідальності;

• Код повинен бути таким, щоб його можна було використовувати повторно.

Розвиток методології і її «обкатка» сотнями розробників показала, що вона підходить не тільки для великих порталів, а й для web-студій або інших моделей розробки. Для застосування методології розробляються технічні рішення, які не просто задовольняють БЕМ, а мають окремі переваги. Це, наприклад, «особливий» JavaScript. І JavaScript-шаблонізатор. І набір інструментів, реалізованих на NodeJS.

Гарантований прогрес

Які наші основні очікування від використання БЕМ? Я б виділив:

1. Відсутність колізій;

2. Відсутність колізій;

3. І ще раз відсутність колізій.

Методологія гарантує відсутність колізій, використовуючи ізоляції через простір імен. Це сучасна реінкарнація колишньої концепції ізольованих модулів. А з SASS взагалі ціле об'єктно-орієнтоване програмування. Звичайно, спочатку потрібно витратити час для грамотного розбиття на компоненти. Але це того варте: модульність має значні переваги, а саме:

1. Читабельний і підтримуваний код;

2. Перевикористання компонентів;

3. Простота тестування;

4. Гармонія з об'єктною природою JavaScript.

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

Ім'я БЕМ-сутyjcnі унікальне. У всіх технологіях (CSS, JavaScript, HTML) одна і та ж БЕМ-сутність завжди повинна бути названа однаково. Основна ідея домовленості по іменуванню — вкласти сенс в імена і зробити їх максимально інформативними для розробника.

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

searchitemactive

search-item-active

searchItemActive

Щоб зрозуміти сенс першого імені, потрібно вчитатися в кожне слово. В останніх двох прикладах ім'я явно розділяється на логічні частини. Але жодне з імен поки не допомагає точно визначити, що search — це блок, item — елемент, а active — модифікатор. Щоб імена сутностей були однозначними і зрозумілими, в БЕМ були розроблені правила формування імен БЕМ-сутностей.

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

• block-name__elem-name_mod-name_mod-val

• Імена записуються латиницею в нижньому регістрі.

• Для поділу слів в іменах використовується дефіс (-).

• Ім'я блоку задає простір імен для його елементів і модифікаторів.

• Ім'я елемента відокремлюється від імені блоку двома підкресленнями (__).

• Ім'я модифікатора відділяється від імені блоку або елементу одним підкресленням (_).

• Значення модифікатора відділяється від імені модифікатора одним підкресленням (_).

• Значення булевих модифікаторів в імені не вказується.

Важливо! У методології БЕМ не існує елементів елементів. Правила іменування забороняють створювати елементи елементів, але в DOM-дереві елементи можна вкладати один в одного.

Ім'я блоку

	 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; }

Як ще можна назвати

Описані вище правила формування імен — це класична схема іменування БЕМ-сутностей. Всі інструменти БЕМ за замовчуванням налаштовані на класичну схему.

Існують альтернативні схеми іменування, які активно використовуються в БЕМ-співтоваристві. Щоб у всіх технологіях застосовувати однакові імена, створені за альтернативнимb схемами, використовуйте інструмент bem-naming. За замовчуванням bem-naming містить налаштування домовленості по іменуванню, запропонованого методологією, але дозволяє додавати правила для застосування альтернативних схем.

Стиль Two Dashes (який використовую я)

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

• Імена записуються латиницею в нижньому регістрі.

• Для поділу слів в іменах БЕМ-сутностей використовується дефіс (-).

• Ім'я елемента відокремлюється від імені блоку двома підкресленнями (__).

• Булеві модифікатори відокремлюються від імені блоку або елементу двома дефісами (-).

• Значення модифікатора відділяється від його імені двома дефісами (-).

Важливо! Подвійний дефіс всередині коментаря (-) може викликати помилки при валідації HTML-документа.

Також є і інші стилі CamelCase, React, No-namespace про них детальну інформацію можна знайти в мережі.

Ваша схема іменування

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

Для великих проектів БЕМ — відмінний вибір. Він зажадає деяких зусиль на початку роботи, але заощадить велику кількість часу в довгостроковій перспективі. Так що вперед!

От і все. Якщо нам вдасться зберегти головну цінність БЕM — ізоляцію компонентом, то творити всередині самих компонентів можна буде все що завгодно. Якщо ви контролюєте всі кореневі стилі, тобто у вас весь-весь код розбитий на простір імен, і за їх межами селекторів немає, то ви досягли просвітління і можете дозволити собі все.

Телеграм-канал обговорення БЕМ