Документ описывает разработку темы для WordPress с использованием методологии BEM, предоставляя информацию о структуре проекта и необходимых технологиях (PHP, CSS, JS). Основные темы включают сборку блоков с помощью инструмента BEM и минимизацию кода с утилитами borschik и uglify-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