Сергей Бережной, Варвара Степанова "Как...
DESCRIPTION
Есть мнение, что БЭМ! можно применять только в Яндексе и подобных больших компаниях для сложных проектов. Мы расскажем, почему это не так. Доклад ориентирован на любого веб-разработчика, а примеры будут основываться на таких задачах как: вёрстка HTML+CSS по PSD, написание JS компонент, сборка динамического сайта с использованием PHP/Django/RoR.TRANSCRIPT
Я.Субботник, Челябинск, 25 февраля 2012 года
Варвара Степановаразработчик интерфейсов
#БЭМ
Как использовать БЭМ!вне Яндекса
photosight.ru
2
3
photosight.ru
4
6
HTML/CSS верстальщик
7
JavaScript программист
+
8
Front-end разработчик
9
Серверный разработчик
10
Разработчик “под ключ”
11
Руководитель разработки
Я.Субботник, Челябинск, 25 февраля 2012 года
Варвара Степановаразработчик интерфейсов
#БЭМ
Как использовать БЭМ!вне Яндекса
БЭМ!
14
Блок
Блок
15
<div class=”search”> <!-- // --></div>
HTML-код блока
16
search/ __input/ search__input.css __button/ search__button.css
search.css
Файлы блока
17
18
Элемент
19
Блок с элементами
Элемент
20
<div class=”search”> <input class=”search__input” .../> <span class=”search__button”> ... </span></div>
HTML код элементов
21
search/ __input/ search__input.css __button/ search__button.css
search.css
Файлы элементов
22
Модификатор
23
Модификатор
24
<div class=”search search_bg_red”> ...</div>
HTML код модификатора
25
search/ _color/ search_bg_red.css search.css
Файлы модификаторов
26
photosight.ru
27
28
29
30
Делаем обычный сайт
33
HTML/CSS вёрстка
Традиционная вёрстка
Файловая структура проекта
36
css/
Файловая структура проекта
36
css/img/
Файловая структура проекта
36
css/img/page.html
Файловая структура проекта
36
css/img/page.htmlindex.html
Файловая структура проекта
36
#head { /* ... */}#head a { /* ... */}
Обычный CSS файл
37
Вёрстка по БЭМ!
39
Файловая структура проекта
40
blocks/
Файловая структура проекта
40
blocks/ head/ auth/ search/ footer/
Файловая структура проекта
40
blocks/ head/ auth/ search/ footer/
pages/
Файловая структура проекта
40
blocks/ head/ auth/ search/ footer/
pages/ index/ proCle/ order/
Файловая структура проекта
40
41
search/ _bg/ search_bg_red.css __input/ search__input.css search__input.ie.css search.css
Файловая структура блока
42
bem create
44
> bem create block search
bem create
44
> bem create block search> bem create elem -b search input
bem create
44
> bem create block search> bem create elem -b search input> bem create mod -b search size -v big
bem create
44
> bem create block search> bem create elem -b search input> bem create mod -b search size -v big
> bem create --help
bem create
44
Шаблоны технологий
.search {}
.search__input {}
.search_bg_red {}
> bem create -T css ...
46
Сборка
49
50
Декларация
52
exports.blocks = [ { block: ‘head’ }, { block: ‘footer’ }, { block: ‘search’ }, ...]
page.bemdecl.js
53
Превращение
54
index.bemdecl.js ⇉
Превращение
54
index.bemdecl.js ⇉ index.cssindex.ie.css
Превращение
54
@import(blocks/head/head.css);@import(blocks/search/search.css);@import(blocks/search/_bg/search_bg_red.css);@import(blocks/search/__input/search__input.css);@import(blocks/search/__button/search__button.css);...
index.css
55
@import(index.css);@import(blocks/search/__input/search__input.ie.css);@import(blocks/search/__button/search__button.ie.css);...
index.ie.css
56
bem build
57
> bem build
bem build
57
> bem build -T css
bem build
57
> bem build -T css -l blocks -d page.bemdecl.js
bem build
57
> bem build -T css -l blocks -d page.bemdecl.js -o pages/index -n index
bem build
57
> bem build -T css -l blocks -d page.bemdecl.js -o pages/index -n index
> ls pages/index
bem build
57
> bem build -T css -l blocks -d page.bemdecl.js -o pages/index -n index
> ls pages/indexindex.bemdecl.js index.css
bem build
57
bem build
58
> bem build -T ie.css -l blocks -d page.bemdecl.js -o pages/index -n index
bem build
58
> bem build -T ie.css -l blocks -d page.bemdecl.js -o pages/index -n index
> ls pages/index
bem build
58
> bem build -T ie.css -l blocks -d page.bemdecl.js -o pages/index -n index
> ls pages/indexindex.bemdecl.js index.css index.ie.css
bem build
58
bem build
59
> bem build --help
bem build
59
Система сборки
61
GNU Make
Оптимизация
64
@import(blocks/head/head.css);@import(blocks/search/search.css);@import(blocks/search/_bg/search_bg_red.css);@import(blocks/search/__input/search__input.css);@import(blocks/search/__button/search__button.css);...
index.css
65
.head { /* ... */}.search { /* ... */}.search_bg_red { /* .. */}
_index.css
66
borschik
67
> borschik
borschik
67
> borschik -i pages/index/index.css
borschik
67
> borschik -i pages/index/index.css -o pages/index/_index.css
borschik
67
Утилиты
68
Утилиты
сБорщик https://github.com/veged/borschik
68
Утилиты
сБорщик https://github.com/veged/borschik
CSSO https://github.com/afelix/csso
68
Утилиты
сБорщик https://github.com/veged/borschik
CSSO https://github.com/afelix/csso
Сеточка https://github.com/afelix/setochka
68
bem server
bem server
70
> bem server
bem server
70
71
@import url(blocks/i-reset/i-reset.css);@import url(blocks/b-page/b-page.css);@import url(blocks/b-description/b-description.css);@import url(blocks/b-link/b-link.css);@import url(blocks/b-page-title/b-page-title.css);@import url(blocks/b-blocks-list/b-blocks-list.css);@import url(blocks/b-blocks-desc/b-blocks-desc.css);@import url(blocks/b-text/b-text.css);@import url(blocks/i-desc/_type/i-desc_type_mod.css);@import url(blocks/i-desc/_type/i-desc_type_elem.css);
index.css
72
73
Внесение изменений
76
77
78
79
80
github.com/bem/bem-haml
81
- DECL :search do |content| %form.search = DO content
- DECL :search__input %input.search__input
- DECL :search__button do |content| %button.search__button = DO content
search.haml
82
- DECL :search do |content| - DO :search__input - DO :search__button Найти
index.haml
83
index.bemdecl.js ⇉ index.cssindex.ie.css
Превращение
84
index.bemdecl.js ⇉ index.cssindex.ie.css
Превращение
84
index.haml ⇉
index.bemdecl.js ⇉ index.cssindex.ie.css
Превращение
84
index.haml ⇉ index.html
Документация
86
Что плохо?
87
Что плохо?
87
Длинные CSS классы
Что плохо?
87
Длинные CSS классы
Много файлов
Что плохо?
87
Длинные CSS классы
Много файлов
Сборка и пересборка
88
в контексте HTML/CSSРадость
89
в контексте HTML/CSSРадость
89
Порядок
в контексте HTML/CSSРадость
89
Порядок
Независимость блоков
в контексте HTML/CSSРадость
89
Порядок
Независимость блоков
Компиляция / оптимизация
в контексте HTML/CSSРадость
89
Порядок
Независимость блоков
Компиляция / оптимизация
Станок (реиспользование кода)
в контексте HTML/CSSРадость
89
Порядок
Независимость блоков
Компиляция / оптимизация
Станок (реиспользование кода)
Документируемость
Пишем JavaScript
Обычный JavaScript
css/img/js/page.htmlindex.html
Файловая структура проекта
92
<html> <head> <script src=”js/plugins/ui.js”/> <script src=”js/page.js”/> ...</html>
HTML-код страницы
93
JavaScript по БЭМ!
95
96
search/ ... search.css search.js
Файловая структура блока
97
98
JavaScript блоков
99
blocks/ search/ ... search.js
JavaScript блоков
99
blocks/ search/ ... search.js visualsearch/ visualsearch.js
JavaScript блоков
99
Зависимости блоков
({ shouldDeps: [
{ block: ‘visualsearch’ }
]})
search.deps.js
101
bem build
102
> bem build -T js -l blocks -d page.bemdecl.js -o pages/index -n index
bem build
102
> bem build -T js -l blocks -d page.bemdecl.js -o pages/index -n index
> ls pages/index
bem build
102
> bem build -T js -l blocks -d page.bemdecl.js -o pages/index -n index
> ls pages/indexindex.bemdecl.js ... index.js
bem build
102
/* visualsearch.js */...
/* search.js */var visualSearch = VS.init({ ...});
index.js
103
Блоки, которых не видно
105
105
http://yandex.st/jquery/1.7.1/jquery.js
106
blocks/ backbone/ backbone.js underscore/ underscore.js
Вспомогательные блоки
107
Что плохо?
108
Длинные CSS классы
Много файлов
Сборка и пересборка
Что плохо?
108
Длинные CSS классы
Много файлов
Сборка и пересборка
Надо договариваться
109
в контексте JavaScriptРадость
110
в контексте JavaScriptРадость
110
Порядок
в контексте JavaScriptРадость
110
Порядок
Интеграция с HTML-вёрсткой
в контексте JavaScriptРадость
110
Порядок
Интеграция с HTML-вёрсткой
Зависимости
в контексте JavaScriptРадость
110
Порядок
Интеграция с HTML-вёрсткой
Зависимости
Компиляция
в контексте JavaScriptРадость
110
Порядок
Интеграция с HTML-вёрсткой
Зависимости
Компиляция
Документируемость
Натягивание рыбы
112
Обычно
114
Server-side по БЭМ!
117
118
119
119
при управлении разработкойРадость
120
при управлении разработкойРадость
120
Быстрее работают
при управлении разработкойРадость
120
Быстрее работают
Больше делают
121
121
Итоги
Всеобщая радость
123
Всеобщая радость
123
Модульность
Всеобщая радость
123
Модульность
Единая предметная область
Всеобщая радость
123
Модульность
Единая предметная область
Документируемость
Всеобщая радость
123
Модульность
Единая предметная область
Документируемость
Компиляция
Всеобщая радость
123
Модульность
Единая предметная область
Документируемость
Компиляция
Станок
124
124
124