Мастер-класс про БЭМ

Теория

Словарь
БЭМ! — методология + инструменты + библиотека

Словарь
БЭМ! — методология + инструменты + библиотека
БЭМ-сущность — блок, элемент, модификатор
БЭМ-технология — ~ язык программирования

Сущности и технологии
$ ls -1 bem-bl/blocks-desktop/b-search/
b-search.bemhtml
b-search.css
b-search.deps.js
b-search.en.title.txt
b-search.ru.title.txt
b-search.ru.wiki
examples
__layout
blocks/block/block.tech
blocks/block/__elem/block__elem.tech
blocks/block/_mod/block_mod_val.tech

Словарь
БЭМ! — методология + инструменты + библиотека
БЭМ-сущность — блок, элемент, модификатор
БЭМ-технология — ~ язык программирования
БЭМ-дерево — дерево блоков страницы
БЭМ-декларация — множество блоков страницы

Дерево
({
block: 'b-page',
head: [
{ elem: 'css', url: 'example.css' },
{ elem: 'css', url: 'example.ie.css', ie: 'lt IE 8' },
{ block: 'i-jquery', elem: 'core' },
{ elem: 'js', url: 'example.js' }
],
content: {
block: 'b-link',
mods: { pseudo: 'yes' },
url: 'www.yandex.ru',
target: '_blank',
title: 'Click me',
content: 'Visit Yandex'
}
})
bem-bl-test/pages/example/example.bemjson.js

Декларация
exports.blocks = [
{ "name": "b-page" },
{
"name": "b-link",
"mods": [
{
"name": "pseudo",
"vals": [ "yes" ]
}
]
}
];
bem-bl-test/pages/example/example.bemdecl.js

Сборка

Теория
Подробно:
github.com/bem/bem-method

Применение

CSS
JS
BEMHTML
PRIV.JS
NODE
Глубина погружения

Применение
Готовый движок?
CSS, JS
Статический сайт?
CSS, JS, BEMHTML
Динамический сайт?
CSS, JS, BEMHTML, PRIV.JS

Практика 1: статика

Инструменты + библиотека
github.com/bem/bem-tools
github.com/bem/bem-bl-test

План
Подготовка:
— настраиваем веб-сервер (nginx)
— устанавливаем bem-tools
Разработка:
— скачиваем библиотеку
— описываем свою страницу
— пишем технологии для блоков: css, js, bemhtml

Практика 2: динамика

План
Подготовка:
— настраиваем проксирование http-запросов
Разработка:
— веб-сервер на node
— технология сборки priv.js
— кастомизация технологии сборки bemhtml
— технологии для блоков: priv.js

Результат
github.com/mishanga/serp