WebHive

Заметки программиста-многостаночника
© 2026 WebHive

Добавляем в БЭМ проект стандартные блоки и компоненты

Ранее в статье Создаём минимальный проект на БЭМ c нуля мы создали проект на БЭМ. Однако он пока довольно бесполезен. Пришло время расширить его добавив уже готовые решения и компоненты предоставленные компанией Yandex.

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

Итак — поехали!

Устанавливаем bem-core и bem-components — соответственно минимальный набор блоков и технологий и набор дополнительных компонентов.

Вот только как же это сделать? Документация просто божественна — «Вы также можете добавить библиотеку к себе в проект любым известным вам способом.».
Ну или опять через project-stub. Похоже никто уже не помнит как всё это хозяйство собирать.

Ну что — поехали ставить bower (если у вас его ещё нет). Ну даже если есть — пусть хоть добавится в package.json

$ npm install -g bower --save
$ bower init

Ставим bem-core и bem-components

$ bower install bem-core --save
bower bem-core#*                cached https://github.com/bem/bem-core.git#3.0.1
bower bem-core#*              validate 3.0.1 against https://github.com/bem/bem-core.git#*

$ bower install bem-components --save
bower bem-components#*          cached https://github.com/bem/bem-components.git#3.0.0
bower bem-components#*        validate 3.0.0 against https://github.com/bem/bem-components.git#*
bower bem-components#^3.0.0    install bem-components#3.0.0

bem-components#3.0.0 bower_components/bem-components
└── bem-core#3.0.1

bem-core

В этой библотеке только 2 HTML элемента — это page и clearfix. Остальное — javascript функции.

Правим ENB конфиг

Добавляем уровни переопределения для bem-core.

...
    levels = [
        { path: 'bower_components/bem-core/common.blocks', check: false },
        { path: 'bower_components/bem-core/desktop.blocks', check: false },
    ];

Теперь сборщик для каждого блока из bemjson файла будет проверять, а нет ли уже такого блока по указанным путям. Если есть, то он использует все технологии для этого блока из существующих компонентов, но в тоже время не помешает нам переопределить их как нам надо в нашей конкретной реализации.

И добавляем в BEMHTML суффикс bemhtml т. к. компоненты используют файлы bemhtml не в js формате.

    [techs.bemhtml, { sourceSuffixes: ['bemhtml', 'bemhtml.js'], forceBaseTemplates: true }],

Формируем правильную HTML страницу

Запускаем перегенерацию проекта

$ ./node_modules/.bin/enb make

Проверяем, что блок page теперь не div, а полноценная страница с тегами <head>, <body> и т. п.

bem-components

Добавляем bem-components в уровни переопределения.

...
levels = [
levels = [
    { path: 'bower_components/bem-core/common.blocks', check: false },
    { path: 'bower_components/bem-core/desktop.blocks', check: false },
    { path: 'bower_components/bem-components/common.blocks', check: false },
    { path: 'bower_components/bem-components/desktop.blocks', check: false },
    { path: 'bower_components/bem-components/design/common.blocks', check: false },
    { path: 'bower_components/bem-components/design/desktop.blocks', check: false }
];
];

Добавляем в bemjson какой-нибудь компонент. В нашем случае это будет button. Ну и после перегенерации страницы можем наблюдать HTML код нашей кнопки в теле нашей страницы.

Итого

Комментарии