Презентация Марата Абдулина раскрывает тему БЭМ (Блок-Элемент-Модификатор) методологии. А конкретнее для чего она необходима и в чем ее плюсы.

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

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

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

4. БЛОК

5. ЭЛЕМЕНТ

6. МОДИФИКАТОР

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

8. Предметная абстракция
С точки зрения процесса разработки:
• Все участники процесса оперируют одними терминами
С точки зрения CSS:
• CSS блоков и элементов можно описывать на
псевдоязыке, который затем компилируется в чистый CSS
согласно принятой схеме именования.
С точки зрения JavaScript:
• Не нужно обращаться к DOM-узлам блоков и элементов по
имени класса

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

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

11. Инструменты
bem-tools это инструмент для работы с файлами, написанными по
БЭМ-методу.
CSSO (CSS Optimizer) является минимизатором CSS, выполняющим
как минимизацию без изменения структуры, так и структурную
минимизацию с целью получить как можно меньший текст.
SVGO (SVGO Optimizer) — это инструмент для оптимизации
векторной графики в формате SVG, написанный на Node.js.
Расширяемый сборщик файлов borschik может использоваться для
сборки текстовых файлов из кусочков. Например, для сборки
статических файлов веб-страниц (CSS, JS, etc).

12. А как же рельсы?!
BEM on Rails
github.com/verybigman/bem-on-rails

13. Как пользоваться?
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"}]
}]

14. На этом всё.
Вопросы?
ru.bem.info
github.com/verybigman/bem-on-rails