Основная цель доклада — рассказать о самых полезных и несложных в освоении частях БЭМ стека для проектов, в которых не предполагается использовать node.js сервер для шаблонизации.
7. Карта БЭМ-технологий
4. Модули с помощью ymodules
Тоже что и AMD, но с provide
modules.define(
'tabs',
['i-bem__dom'],
function(provide, BEMDOM) {
provide(BEMDOM.decl('tabs'
}, {
/* properties */
}, {
/* static functions */
}));
});
10. Карта БЭМ-технологий
7. Сборка enb, bem tools
http://enb-make.info/
Просто сборка JS и CSS с учётом:
• уровней переопределения;
• зависимостей;
• различных технологий (SASS, ES6 и пр.)
11. Карта БЭМ-технологий
8. Борщик
Много функций, которые, возможно, и не нужны:
— Инлайн иконок в CSS
— Минификация CSS, JS при сборке для выкладывания на
прод
— “Фриз” статики — сохранение файлов статики с
уникальными хешами (для кеширования браузером)
12. Пример проекта на БЭМ-стеке
без шаблонизации
https://github.com/DimitryDushkin/bem-light-example
1. Структура типичного проекта
2. npm и bower
3. Уровни переопределения
4. Сборка
1. Можно и без enb. Главное - в начале js файла наличие ymodules, i-bem
5. Понятие блоков. Как описывать их в i-bem.
1. Html декларация
2. Js декларация
3. Инициализация
6. Работа с блоками на примерах
1. Удалить объявление
2. Показать телефон
3. Фильтрация
4. Использование внешней библиотеки
5. Сортировка
13. Полезные ссылки
https://ru.bem.info/
• Гайд по i-bem — https://ru.bem.info/tutorials/bem-js-
tutorial/
• Немного устаревшая, но с неплохими примерами работы с i-bem
— http://www.smashingmagazine.com/2014/07/bem-
methodology-for-small-projects/
• Генератор проектов на БЭМ-стеке — https://ru.bem.info/
tools/bem/bem-stub/