• methodology

Методология сборки БЭМ-проекта

Любой проект, построенный по БЭМ-методологии, имеет разветвленную файловую структуру. Причина этого — компонентный подход. Блоки в БЭМ могут быть реализованы в одной или нескольких технологиях. Каждая технология находится в отдельном файле. Как следствие, чтобы получить из отдельных файлов блоков общие файлы проекта, необходимо применить сборку. Для этого можно использовать любой из существующих инструментов сборки.

Пример организации файловой структуры БЭМ-проекта:

blocks/                 # Уровень проекта
    input/              # Директория блока input
        input.css       # Реализация блока input в технологии CSS
        input.js        # Реализация блока input в технологии JavaScript
    icon/
        icon.css

library/                # Уровень библиотеки
    input/
        input.js        # Базовая реализация блока input в технологии JavaScript
    button/

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

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

• объединяет отдельные файлы реализаций, разложенные по файловой системе;
• подключает в проект только нужные блоки, элементы и модификаторы из имеющихся в файловой системе;
• учитывает порядок подключения файлов в проект.

Основные этапы сборки

Чтобы из отдельных файлов получить готовую часть проекта (результат сборки), например, веб-страницу, необходимо:

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

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

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

• файлы для отдельной страницы (например, hello.css и hello.js);
• общие файлы для всего проекта (например, один project.css и project.js);
• файлы для фрагмента страницы, такого как шапка или подвал, которые используются на разных страницах проекта (например, header.css и header.js). Общая часть собирается отдельно и подключается при сборке.

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

Обратите внимание, в документе сборка рассматривается на примере страницы — частного случая бандла.

В файловой системе результаты сборки отдельных файлов автоматически помещаются в директорию с названием страницы (например, hello):

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

bundles/                # Директория, содержащая все результаты сборки (опционально)
    hello/              # Директория страницы hello (создается вручную)

Пример файловой системы БЭМ-проекта до выполнения сборки:

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

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

Пример файловой системы БЭМ-проекта после выполнения сборки:

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

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

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

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

Для сборки в проект только нужных БЭМ-сущностей используются (опционально):

• Декларация — определяет список БЭМ-сущностей, необходимых для создания страницы.
• Зависимости — определяют БЭМ-сущности, необходимые для реализации блока.
• Уровни переопределения — определяют порядок подключения БЭМ-сущностей в сборку.

Определение списка блоков, элементов и модификаторов для создания страницы

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

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

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

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

Подробнее о способах построения декларации.

Поиск зависимостей

В БЭМ-методологии многие блоки строятся на основании других блоков. Так, например, блок формы поиска (search-form) построен с помощью блоков input (поле ввода) и button (кнопка). Нет необходимости реализовывать блок повторно, если он уже представлен в библиотеке. Новый блок можно построить на основании существующего.

Чтобы создать блок с помощью другого, уже существующего блока, необходимо указать зависимости между ними. Так, приведенный в примере блок search-form зависит от input и button.

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

Существует несколько способов указать зависимости:

• Непосредственно в коде блока.

  • В CSS зависимости можно определять с помощью директивы @import.
  • В JavaScript можно декларировать зависимости с помощью модульной системы (например, AMD, CommonJS) или импортов (ECMAScript 2015).

• В отдельном файле.

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

  blocks/
      input/
          input.css
          input.js
          input.deps.js   # Файл с зависимостями блока input
      button/
          button.css
          button.js
  

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

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

• указанных зависимостей

  Зависимости определяют, в каком порядке дополнительная сущность должна попасть в сборку.

• используемых уровней переопределения

  Важно соблюдать порядок подключения уровней в сборку. Если сравнить уровни со слоями, то базовый слой – это исходная реализация блока, например, полученная из библиотеки, а каждый последующий слой накладывается сверху и дополняет (наследует) или изменяет базовую реализацию. Поэтому важно, чтобы в сборку сначала попадала исходная реализация, а затем изменения со всех уровней переопределения.

На схеме показан принцип использования уровней переопределения при сборке: с уровня common подключаются общие компоненты для всех платформ, а с уровней desktop и touch — компоненты, специфичные для каждой из платформ.

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

• Переопределение блоков библиотеки
• Разделение проекта на платформы

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

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

БЭМ-методология не ограничивает выбор инструмента — можно использовать любые сборщики (например, Gulp, Grunt, Brunch, Broccoli), отвечающие требованиям вашего проекта.

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

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

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