Документ представляет собой описание разработки темы для WordPress с использованием методологии BEM, подготовленный Владимиром Гриненко для конференции в Москве. Он охватывает создание страницы в формате bemjson, сборку блоков с помощью bem tools и оптимизацию CSS и JS. Также приводится структура проекта и ссылки на инструменты.

1. Тема для WordPress в БЭМ
Владимир Гриненко
Разработчик интерфейсов
Yet another Conference, Москва, 19 сентября 2011 года

2. БЭМ!
Клуб
http://clubs.ya.ru/bem/
Репозиторий
https://github.com/bem/
2

3. BEM – это не только b-
3

4. Что мы будем делать
Yet another WordPress theme
— Описание страницы в формате bemjson
4

5. Что мы будем делать
Yet another WordPress theme
— Описание страницы в формате bemjson
— Блоки в технологиях php, css, js
5

6. Что мы будем делать
Yet another WordPress theme
— Описание страницы в формате bemjson
— Блоки в технологиях php, css, js
— Сборка блоков с помощью BEM tools
6

7. Что мы будем делать
Yet another WordPress theme
— Описание страницы в формате bemjson
— Блоки в технологиях php, css, js
— Сборка блоков с помощью BEM tools
— Разворачивание css-импортов утилитой borschik
7

8. Что мы будем делать
Yet another WordPress theme
— Описание страницы в формате bemjson
— Блоки в технологиях php, css, js
— Сборка блоков с помощью BEM tools
— Разворачивание css-импортов утилитой borschik
— Структурная минимизация с CSSO
8

9. Что мы будем делать
Yet another WordPress theme
— Описание страницы в формате bemjson
— Блоки в технологиях php, css, js
— Сборка блоков с помощью BEM tools
— Разворачивание css-импортов утилитой borschik
— Структурная минимизация с CSSO
— Минимизация js утилитой uglify-js
9

10. Ссылки на инструменты
Шпаргалка
http://clck.ru/L2Lh
Репозиторий
http://clck.ru/L4lR
10

11. Структура проекта
bempress/
blocks/ уровень переопределения темы
header/
footer/
pages/ уровень переопределения страниц
index/
blocks/
single/
11

12. Структура проекта
bempress/
blocks/ уровень переопределения темы
header/ технологии блока
header.css
header.js
header.php
footer/
12

13. Структура проекта
bempress/
pages/ уровень переопределения страниц
index/
blocks/ блоки уровня страниц
header/
header.css доопределение технологии блока
index.bemjson.js описание страницы
13

14. Владимир Гриненко
Разработчик интерфейсов
tadatuta@yandex-team.ru