Форум

Методология

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

Платформа

Сообщество

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

Введение

В БЭМ-проекте код разделяется на отдельные файлы (также называемые исходными файлами).

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

Пример

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

Задачи сборки

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

  • Объединяет исходные файлы, разложенные по файловой структуре проекта.
  • Подключает в проект только необходимые блоки, элементы и модификаторы (БЭМ-сущности).
  • Учитывает порядок подключения.
  • Обрабатывает код исходных файлов в процессе сборки (например, компилирует LESS-код в CSS-код).

Этапы сборки

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

  1. Список БЭМ-сущностей.
  2. Зависимости между ними.
  3. Порядок их подключения.

Определение списка БЭМ-сущностей

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

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

Пример

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

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

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

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

В БЭМ блоки могут строиться на основании других блоков. Для этого необходимо указать зависимости от них.

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

Пример

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

Зависимости позволяют строить новые блоки на основе уже существующих. Это избавляет от ненужного «Copy-Paste».

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

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

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

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

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

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

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

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

Пример

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

Уровни переопределения позволяют изменять представление и поведение блоков для различных платформ.

Подробно об использовании уровней переопределения читайте в примерах:

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

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

  • фрагмента страницы (например, header.css или footer.css);
  • отдельной страницы (например, hello.css и hello.js);
  • всего проекта (например, project.css и project.js).

Ниже приведен пример сборки страницы 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)

При сборке в проект могут быть включены:

  • все БЭМ-сущности с файловой структуры проекта (значительно увеличивает объем результирующего кода);
  • только необходимые для построения страницы БЭМ-сущности.

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

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

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

Пример сборки БЭМ-проекта с помощью ENB — Создаем проект по БЭМ.

Пример сборки БЭМ-проекта с помощью Gulp — Декларативный JavaScript по БЭМ.

Если вы заметили ошибку или хотите чем-то дополнить статью, вы всегда можете или написать нам об этом на Гитхабе, или поправить статью с помощью prose.io.