• methodology

Определения

• Блок
• Элемент
• Модификатор
• БЭМ-сущность
• Микс
• БЭМ-дерево
• Реализация блока
• Технология реализации блока
• Переопределение блока
• Уровень переопределения

Блок

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

Возможности блоков

Вложенная структура

Блоки могут быть вложены в любые другие блоки.

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

Свободное перемещение

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

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

Повторное использование

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

Элемент

Составная часть блока, которая не может использоваться в отрыве от него.

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

Когда создавать блок, когда элемент?

Почему в методологии БЭМ не рекомендуется создавать элементы элементов?

Модификатор

БЭМ-сущность, определяющая внешний вид, состояние и поведение блока или элемента.

Использование модификаторов опционально.

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

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

БЭМ-сущность

БЭМ-сущностями называются блоки, элементы и модификаторы.

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

Микс

Способ использования разных БЭМ-сущностей на одном 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>
    <div class="lang-switcher"></div>
</header>

Ему соответствует такое БЭМ-дерево:

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

Это же БЭМ-дерево будет иметь следующий вид в форматах XML и BEMJSON:

XML

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

BEMJSON

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

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

Набор различных технологий, определяющих следующие особенности БЭМ-сущности:

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

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

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

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

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

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

Переопределение блока

Изменение реализации блока путем добавления ему новых особенностей на другом уровне.

Уровень переопределения

Набор БЭМ-сущностей и их частичных реализаций.

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

Переопределять можно любые технологии реализации БЭМ-сущностей.

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

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