Форум

Методологія

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

Платформа

Спільнота

Визначення

Блок

Логічно і функціонально незалежний компонент сторінки, аналог компонента в Web Components. Блок інкапсулює в собі поведінку (JavaScript), шаблони, стилі (CSS) та інші технології реалізації. Незалежність блоків забезпечує можливість їх повторного використання, а також зручність у розробці та підтримці проекту.

Можливості блоків

Вкладена структура

Блоки можуть бути вкладені в інші блоки.

Наприклад, блок head може включати логотип (logo), форму пошуку (search) і блок авторизації (auth).

Складові блока Шапка

Вільне переміщення

Блоки можна переміщати в межах однієї сторінки, сторінок або проектів. Незалежна реалізація блока дозволяє змінювати його положення на сторінці і забезпечує коректну роботу і зовнішній вигляд.

Так, наприклад, логотип і форму авторизації можна поміняти місцями. При цьому вносити зміни в CSS та JavaScript-код блока не потрібно.

Зміна положення блоків

Зміна положення блоків

Повторне використання

В інтерфейсі може одночасно бути кілька примірників одного й того ж блока.

Товари в інтернет-магазині

Елемент

Складова частина блока, яка не може використовуватися у відриві від нього.

Наприклад, пункт меню поза контекстом блока меню не використовується, значить є елементом.

Меню

Коли створювати блок, коли елемент?

Чому в методології БЕМ не рекомендується створювати елементи элементов?

Модифікатор

БЕМ-сутність, що визначає зовнішній вигляд, стан і поведінку блока чи елемента.

Використання модифікаторів є опціональним.

По своїй суті модифікатори схожі на атрибути HTML. Один і той же блок виглядає по-різному завдяки застосуванню модифікатора.

Наприклад, зовнішній вигляд блока меню (menu) може змінюватися в залежності від застосованого модифікатора.

Додати меню в підвалі

Модифікатори можуть змінюватися як в процесі роботи блока (наприклад, як реакція на DOM-події блока), так і за запитом з інших блоків.

Наприклад, при кліку по кнопці Sign In (DOM-подія click), у разі невірно заповнених полів Login або Password, на прихований блок повідомлень про помилки встановити модифікатор (visible).

БЕМ-сутність

БЕМ-сутностями називаються блоки, елементи та модифікатори.

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

Мікс

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

Мікси дозволяють:

  • поєднувати поведінку і стилі декількох БЕМ-сутностей без дублювання коду;
  • створювати семантично нові компоненти інтерфейсу на основі наявних БЕМ-сутностей.

Розглянемо приклад міксу блока та елемента іншого блока.

Припустимо, у проекті посилання реалізовані блоком link. Необхідно зробити посиланнями на пункти меню. Існує кілька способів:

  • Створити модифікатор для пункту меню, який перетворить пункт у посилання. Проте в такому випадку для реалізації модифікатора доведеться скопіювати поведінку й стилі блока link. Це призведе до дублювання коду.
  • Скористатися міксом універсального блока link і елемента link блока menu. Мікс двох БЕМ-сутностей дозволить застосувати базову функціональність посилань з блока link і додаткові CSS-правила з блока menu без копіювання коду.

БЕМ-дерево

Представлення структури веб-сторінки в термінах блоків, елементів і модифікаторів. Це абстракція над DOM-деревом, яка описує імена БЕМ-сутностей, їх стани, порядок, вкладеність і допоміжні дані.

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

Розглянемо приклад DOM-дерева:

<header class="header">
    <img class="logo">
    <form class="search-form">
        <input type="input">
        <button type="button"></button>
    </form>
    <ul class="lang-switcher">
        <li class="lang-switcher__item">
            <a class="lang-switcher__link" href="url">en</a>
        </li>
        <li class="lang-switcher__item">
            <a class="lang-switcher__link" href="url">ru</a>
        </li>
    </ul>
</header>

Йому відповідає таке БЕМ-дерево:

header
    ├──logo
    └──search-form
        ├──input
        └──button
    └──lang-switcher
        └──lang-switcher__item
            └──lang-switcher__link
        └──lang-switcher__item
            └──lang-switcher__link

Це ж БЕМ-дерево буде мати такий вигляд у форматах XML і BEMJSON:

XML

<block:header>
    <block:logo/>
    <block:search-form>
        <block:input/>
        <block:button/>
    </block:search-form>
    <block:lang-switcher>
        <elem:item>
            <elem:link/>
        </elem:item>
        <elem:item>
            <elem:link/>
        </elem:item>
    </block:lang-switcher>
</block:header>

BEMJSON

{
    block: 'header',
    content : [
        { block : 'logo' },
        {
            block : 'search-form',
            content : [
                { block : 'input' },
                { block : 'button' }
            ]
        },
        {
            block : 'lang-switcher',
            content : [
                {
                    elem : 'item',
                    content : [
                        { elem : 'link' }  
                    ]
                },
                {
                    elem : 'item',
                    content : [
                        { elem : 'link' }
                    ]
                }
            ]
        }
    ]
}

Реалізація блока

Набір різних технологій, що визначають такі особливості БЕМ-сутності:

  • поведінку;
  • зовнішній вигляд;
  • тести;
  • шаблони;
  • документацію;
  • опис залежностей;
  • додаткові дані (наприклад, картинки).

Технологія реалізації

Технологія, яка використовується для реалізації блока.

Блоки можуть бути реалізовані в одній чи декількох технологіях, наприклад:

  • поведінка — JavaScript, CoffeeScript;
  • зовнішній вигляд — CSS, Stylus, Sass;
  • шаблони — Jade, Handlebars, XSL, BEMHTML, BH;
  • документація — Markdown, Wiki, XML.

Наприклад, якщо зовнішній вигляд блока заданий за допомогою CSS, це означає, що блок реалізований у технології CSS. А якщо документація до блока написана в форматі Markdown — блок реалізований у технології Markdown.

Перевизначення блока

Зміна реалізації блока шляхом додання йому нових особливостей на іншому рівні.

Рівень перевизначення

Набір БЕМ-сутностей і їх часткових реалізацій.

Кінцева реалізація блока може бути поділена за різними рівнями перевизначення. Кожен наступний рівень додає або перекриває вихідну реалізацію блока. Кінцевий результат збирається з окремих технологій реалізації блока з усіх рівнів перевизначення послідовно в заданому порядку.

Рівень перевизначення

Ігнорувати можна будь-які технології реалізації БЕМ-сутностей.

Наприклад, до проекту на окремий рівень підключається стороння бібліотека, яка містить готові реалізації блоків. Проектні блоки зберігаються на іншому рівні перевизначення.

Припустимо, що необхідно змінити зовнішній вигляд одного з блоків бібліотеки. Для цього не потрібно змінювати CSS-правила блока у вихідному коді бібліотеки чи копіювати код на рівень проекту. Досить створити додаткові CSS-правила для цього блока на проектному рівні. При складанні в кінцеву реалізацію підключаться вихідні стилі з рівня бібліотеки й нові — з рівня проекту.

БЕМ: Розробка під кілька платформ

Якщо ви помітили помилку, або хочете доповнити статтю, ви завжди можете або написати нам про це на Гітхабі, або поправити статтю з допомогою prose.io.