Ранее в статье Создаём минимальный проект на БЭМ c нуля мы создали проект на БЭМ. Однако он пока довольно бесполезен. Пришло время расширить его добавив уже готовые решения и компоненты предоставленные компанией Yandex.
Собственно можно обойтись и без этого, но я не вижу причин не использовать опыт накопленный инженерами Yandex и не использовать их решения, уже проверенные в боевых условиях на множестве их проектов.
Итак — поехали!
Устанавливаем bem-core и bem-components — соответственно минимальный набор блоков и технологий и набор дополнительных компонентов.
Вот только как же это сделать? Документация просто божественна — «Вы также можете добавить библиотеку к себе в проект любым известным вам способом.».
Ну или опять через project-stub
. Похоже никто уже не помнит как всё это хозяйство собирать.
Ну что — поехали ставить bower
(если у вас его ещё нет). Ну даже если есть — пусть хоть добавится в package.json
1 | $ npm install -g bower --save |
Ставим bem-core и bem-components
1 | $ bower install bem-core --save |
bem-core
В этой библотеке только 2 HTML элемента — это page и clearfix. Остальное — javascript функции.
Правим ENB конфиг
Добавляем уровни переопределения для bem-core.
1 | ... |
Теперь сборщик для каждого блока из bemjson
файла будет проверять, а нет ли уже такого блока по указанным путям. Если есть, то он использует все технологии для этого блока из существующих компонентов, но в тоже время не помешает нам переопределить их как нам надо в нашей конкретной реализации.
И добавляем в BEMHTML суффикс bemhtml
т. к. компоненты используют файлы bemhtml
не в js формате.
1 | [techs.bemhtml, { sourceSuffixes: ['bemhtml', 'bemhtml.js'], forceBaseTemplates: true }], |
Формируем правильную HTML страницу
Запускаем перегенерацию проекта
1 | $ ./node_modules/.bin/enb make |
Проверяем, что блок page
теперь не div, а полноценная страница с тегами <head>
, <body>
и т. п.
bem-components
Добавляем bem-components в уровни переопределения.
1 | ... |
Добавляем в bemjson
какой-нибудь компонент. В нашем случае это будет button. Ну и после перегенерации страницы можем наблюдать HTML код нашей кнопки в теле нашей страницы.
Итого
- Подключены bem-core и bem-components
Комментарии