БЭМ методология

Блок-Элемент-Модификатор

БЭМ

Для чего?• Типовые проекты должны разрабатываться быстро, но жить долго•Над проектом работает много людей•Масштабируемость команд•Повторное использование кода

БЛОК

ЭЛЕМЕНТ

МОДИФИКАТОР

Независимость кодаНезависимость блоков

Независимость CSS

Предметная абстракцияС точки зрения процесса разработки:• Все участники процесса оперируют одними

терминами

С точки зрения CSS:• CSS блоков и элементов можно описывать

на псевдоязыке, который затем компилируется в чистый CSS согласно принятой схеме именования.

С точки зрения JavaScript:• Не нужно обращаться к DOM-узлам блоков и

элементов по имени класса

Консистентность блока

Организация файловой системы

Инструментыbem-tools это инструмент для работы с файлами, написанными по БЭМ-методу.

CSSO (CSS Optimizer) является минимизатором CSS, выполняющим как минимизацию без изменения структуры, так и структурную минимизацию с целью получить как можно меньший текст.

SVGO (SVGO Optimizer) — это инструмент для оптимизации векторной графики в формате SVG, написанный на Node.js.

Расширяемый сборщик файлов borschik может использоваться для сборки текстовых файлов из кусочков. Например, для сборки статических файлов веб-страниц (CSS, JS, etc).

А как же рельсы?!

BEM on Rails

github.com/verybigman/bem-on-rails

thor bem:create -b test -m color -v red

thor bem:create -b test -e icon -m size -v small

= b "test", mods: [{color: "red"}], content: [{ elem: "icon", elemMods: [{size: "small"}] }]

Как пользоваться?

На этом всё.Вопросы?

ru.bem.info

github.com/verybigman/bem-on-rails