Форум

Методология

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

Платформа

Сообщество

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

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

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

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 — Создаем свой проект на БЭМ.

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