EN RU
Форум

Методология

Технологии

Инструментарий

Библиотеки

Учебные материалы

Сборка БЭМ-проекта

Введение

В БЭМ-проекте код разделяется на отдельные файлы (также называемые исходными файлами). Чтобы объединить исходные файлы в один (например, все CSS-файлы в project.css, все JS-файлы в project.js и т. п.), используется сборка. Файлы, полученные в результате сборки, в БЭМ-методологии принято называть бандлами.

Пример

Сборка БЭМ-проекта

Сборка решает следующие задачи:

Этапы сборки

Чтобы в результате сборки получить бандлы, необходимо определить:

Список БЭМ-сущностей

Чтобы включить в сборку только необходимые БЭМ-сущности, нужно составить список блоков, элементов и модификаторов, используемых на странице. Такой список называется декларацией. Он позволяет избавиться от ненужного кода, который значительно увеличивает объем бандлов.

Инструмент сборки, основываясь на данных из списка, добавляет в бандлы только перечисленные БЭМ-сущности. Ниже приведен пример сборки бандлов на основе декларации.

Пример

Сборка БЭМ-проекта

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

Описание зависимостей

В БЭМ блоки могут строиться на основании других блоков. Для этого необходимо указать зависимости от них. Зависимости позволяют избавиться от ненужного «Copy-Paste».

Инструмент сборки получает данные о зависимостях и добавляет все БЭМ-сущности, необходимые для реализации блока. Ниже приведен пример составного блока.

Пример

Пример составного блока

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

Порядок подключения БЭМ-сущностей в сборку

Порядок подключения БЭМ-сущностей в сборку зависит от:

Зависимости и порядок подключения БЭМ-сущностей в сборку

В БЭМ зависимости могут влиять на порядок подключения БЭМ-сущностей в сборку. Механизм подключения зависит от используемых DEPS-сущностей, которые по-разному влияют на приоритет подключения.

Подробнее о том, как определить порядок подключения БЭМ-сущностей в сборку, см. в разделе Синтаксис DEPS.

Уровни переопределения и порядок подключения БЭМ-сущностей в сборку

В БЭМ конечная реализация блока может быть разделена по разным уровням переопределения. Они позволяют изменять представление и поведение блоков для различных платформ. Каждый последующий уровень дополняет или перекрывает исходную реализацию блока. Поэтому важно, чтобы сначала в сборку попадала исходная реализация, а затем изменения со всех уровней переопределения. Ниже приведен пример проекта с уровнями переопределения: common.blocks, desktop.blocks, touch.blocks. Порядок сборки определен цифрами.

Пример

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

Подробно о том, как использовать уровни переопределения, см. в разделе Уровни переопределения.

Результат сборки

В результате сборки можно получить файлы для:

При сборке отдельной страницы/проекта в результирующий код могут быть включены:

Ниже приведен пример сборки страницы hello.

Пример

Файловая структура БЭМ-проекта до сборки:

blocks/                 # Директория, содержащая блоки

bundles/                # Директория, содержащая результаты сборки (опционально)
    hello/              # Директория страницы hello (создается вручную)
        hello.decl.js   # Список БЭМ-сущностей, необходимых для страницы hello

Файловая структура БЭМ-проекта после сборки:

blocks/

bundles/
    hello/
        hello.decl.js
        hello.css       # Собранный CSS-файл страницы hello (бандл hello в технологии CSS)
        hello.js        # Собранный JS-файл страницы hello (бандл hello в технологии JS)

Инструменты для сборки

БЭМ-методология не ограничивает выбор инструмента для сборки.

В БЭМ-платформе используются следующие сборщики: