Сергей Бережной, Варвара Степанова "Как...
DESCRIPTION
Есть мнение, что БЭМ! можно применять только в Яндексе и подобных больших компаниях для сложных проектов. Мы расскажем, почему это не так. Доклад ориентирован на любого веб-разработчика, а примеры будут основываться на таких задачах как: вёрстка HTML+CSS по PSD, написание JS компонент, сборка динамического сайта с использованием PHP/Django/RoR.TRANSCRIPT
![Page 1: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/1.jpg)
Я.Субботник, Челябинск, 25 февраля 2012 года
Варвара Степановаразработчик интерфейсов
#БЭМ
Как использовать БЭМ!вне Яндекса
![Page 2: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/2.jpg)
photosight.ru
2
![Page 3: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/3.jpg)
3
![Page 4: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/4.jpg)
photosight.ru
4
![Page 5: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/5.jpg)
![Page 6: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/6.jpg)
6
HTML/CSS верстальщик
![Page 7: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/7.jpg)
7
JavaScript программист
+
![Page 8: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/8.jpg)
8
Front-end разработчик
![Page 9: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/9.jpg)
9
Серверный разработчик
![Page 10: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/10.jpg)
10
Разработчик “под ключ”
![Page 11: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/11.jpg)
11
Руководитель разработки
![Page 12: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/12.jpg)
Я.Субботник, Челябинск, 25 февраля 2012 года
Варвара Степановаразработчик интерфейсов
#БЭМ
Как использовать БЭМ!вне Яндекса
![Page 13: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/13.jpg)
БЭМ!
![Page 14: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/14.jpg)
14
Блок
![Page 15: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/15.jpg)
Блок
15
![Page 16: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/16.jpg)
<div class=”search”> <!-- // --></div>
HTML-код блока
16
![Page 17: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/17.jpg)
search/ __input/ search__input.css __button/ search__button.css
search.css
Файлы блока
17
![Page 18: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/18.jpg)
18
Элемент
![Page 19: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/19.jpg)
19
Блок с элементами
![Page 20: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/20.jpg)
Элемент
20
![Page 21: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/21.jpg)
<div class=”search”> <input class=”search__input” .../> <span class=”search__button”> ... </span></div>
HTML код элементов
21
![Page 22: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/22.jpg)
search/ __input/ search__input.css __button/ search__button.css
search.css
Файлы элементов
22
![Page 23: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/23.jpg)
Модификатор
23
![Page 24: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/24.jpg)
Модификатор
24
![Page 25: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/25.jpg)
<div class=”search search_bg_red”> ...</div>
HTML код модификатора
25
![Page 26: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/26.jpg)
search/ _color/ search_bg_red.css search.css
Файлы модификаторов
26
![Page 27: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/27.jpg)
photosight.ru
27
![Page 28: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/28.jpg)
28
![Page 29: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/29.jpg)
29
![Page 30: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/30.jpg)
30
![Page 32: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/32.jpg)
Делаем обычный сайт
![Page 33: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/33.jpg)
33
![Page 34: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/34.jpg)
HTML/CSS вёрстка
![Page 35: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/35.jpg)
Традиционная вёрстка
![Page 36: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/36.jpg)
Файловая структура проекта
36
![Page 37: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/37.jpg)
css/
Файловая структура проекта
36
![Page 38: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/38.jpg)
css/img/
Файловая структура проекта
36
![Page 39: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/39.jpg)
css/img/page.html
Файловая структура проекта
36
![Page 40: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/40.jpg)
css/img/page.htmlindex.html
Файловая структура проекта
36
![Page 41: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/41.jpg)
#head { /* ... */}#head a { /* ... */}
Обычный CSS файл
37
![Page 42: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/42.jpg)
Вёрстка по БЭМ!
![Page 43: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/43.jpg)
39
![Page 44: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/44.jpg)
Файловая структура проекта
40
![Page 45: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/45.jpg)
blocks/
Файловая структура проекта
40
![Page 46: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/46.jpg)
blocks/ head/ auth/ search/ footer/
Файловая структура проекта
40
![Page 47: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/47.jpg)
blocks/ head/ auth/ search/ footer/
pages/
Файловая структура проекта
40
![Page 48: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/48.jpg)
blocks/ head/ auth/ search/ footer/
pages/ index/ proCle/ order/
Файловая структура проекта
40
![Page 49: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/49.jpg)
41
![Page 50: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/50.jpg)
search/ _bg/ search_bg_red.css __input/ search__input.css search__input.ie.css search.css
Файловая структура блока
42
![Page 52: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/52.jpg)
bem create
44
![Page 53: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/53.jpg)
> bem create block search
bem create
44
![Page 54: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/54.jpg)
> bem create block search> bem create elem -b search input
bem create
44
![Page 55: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/55.jpg)
> bem create block search> bem create elem -b search input> bem create mod -b search size -v big
bem create
44
![Page 56: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/56.jpg)
> bem create block search> bem create elem -b search input> bem create mod -b search size -v big
> bem create --help
bem create
44
![Page 57: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/57.jpg)
Шаблоны технологий
![Page 58: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/58.jpg)
.search {}
.search__input {}
.search_bg_red {}
> bem create -T css ...
46
![Page 60: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/60.jpg)
Сборка
![Page 61: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/61.jpg)
49
![Page 62: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/62.jpg)
50
![Page 63: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/63.jpg)
Декларация
![Page 64: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/64.jpg)
52
![Page 65: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/65.jpg)
exports.blocks = [ { block: ‘head’ }, { block: ‘footer’ }, { block: ‘search’ }, ...]
page.bemdecl.js
53
![Page 66: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/66.jpg)
Превращение
54
![Page 67: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/67.jpg)
index.bemdecl.js ⇉
Превращение
54
![Page 68: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/68.jpg)
index.bemdecl.js ⇉ index.cssindex.ie.css
Превращение
54
![Page 69: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/69.jpg)
@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
![Page 70: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/70.jpg)
@import(index.css);@import(blocks/search/__input/search__input.ie.css);@import(blocks/search/__button/search__button.ie.css);...
index.ie.css
56
![Page 71: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/71.jpg)
bem build
57
![Page 72: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/72.jpg)
> bem build
bem build
57
![Page 73: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/73.jpg)
> bem build -T css
bem build
57
![Page 74: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/74.jpg)
> bem build -T css -l blocks -d page.bemdecl.js
bem build
57
![Page 75: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/75.jpg)
> bem build -T css -l blocks -d page.bemdecl.js -o pages/index -n index
bem build
57
![Page 76: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/76.jpg)
> bem build -T css -l blocks -d page.bemdecl.js -o pages/index -n index
> ls pages/index
bem build
57
![Page 77: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/77.jpg)
> 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
![Page 78: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/78.jpg)
bem build
58
![Page 79: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/79.jpg)
> bem build -T ie.css -l blocks -d page.bemdecl.js -o pages/index -n index
bem build
58
![Page 80: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/80.jpg)
> bem build -T ie.css -l blocks -d page.bemdecl.js -o pages/index -n index
> ls pages/index
bem build
58
![Page 81: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/81.jpg)
> 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
![Page 82: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/82.jpg)
bem build
59
![Page 83: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/83.jpg)
> bem build --help
bem build
59
![Page 84: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/84.jpg)
Система сборки
![Page 85: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/85.jpg)
61
GNU Make
![Page 87: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/87.jpg)
Оптимизация
![Page 88: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/88.jpg)
64
![Page 89: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/89.jpg)
@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
![Page 90: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/90.jpg)
.head { /* ... */}.search { /* ... */}.search_bg_red { /* .. */}
_index.css
66
![Page 91: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/91.jpg)
borschik
67
![Page 92: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/92.jpg)
> borschik
borschik
67
![Page 93: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/93.jpg)
> borschik -i pages/index/index.css
borschik
67
![Page 94: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/94.jpg)
> borschik -i pages/index/index.css -o pages/index/_index.css
borschik
67
![Page 95: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/95.jpg)
Утилиты
68
![Page 96: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/96.jpg)
Утилиты
сБорщик https://github.com/veged/borschik
68
![Page 97: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/97.jpg)
Утилиты
сБорщик https://github.com/veged/borschik
CSSO https://github.com/afelix/csso
68
![Page 98: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/98.jpg)
Утилиты
сБорщик https://github.com/veged/borschik
CSSO https://github.com/afelix/csso
Сеточка https://github.com/afelix/setochka
68
![Page 99: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/99.jpg)
bem server
![Page 100: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/100.jpg)
bem server
70
![Page 101: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/101.jpg)
> bem server
bem server
70
![Page 102: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/102.jpg)
71
![Page 103: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/103.jpg)
@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
![Page 104: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/104.jpg)
73
![Page 106: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/106.jpg)
Внесение изменений
![Page 107: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/107.jpg)
76
![Page 108: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/108.jpg)
77
![Page 109: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/109.jpg)
78
![Page 110: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/110.jpg)
79
![Page 111: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/111.jpg)
80
github.com/bem/bem-haml
![Page 112: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/112.jpg)
81
![Page 113: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/113.jpg)
- 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
![Page 114: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/114.jpg)
- DECL :search do |content| - DO :search__input - DO :search__button Найти
index.haml
83
![Page 115: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/115.jpg)
index.bemdecl.js ⇉ index.cssindex.ie.css
Превращение
84
![Page 116: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/116.jpg)
index.bemdecl.js ⇉ index.cssindex.ie.css
Превращение
84
index.haml ⇉
![Page 117: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/117.jpg)
index.bemdecl.js ⇉ index.cssindex.ie.css
Превращение
84
index.haml ⇉ index.html
![Page 118: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/118.jpg)
Документация
![Page 119: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/119.jpg)
86
![Page 120: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/120.jpg)
Что плохо?
87
![Page 121: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/121.jpg)
Что плохо?
87
Длинные CSS классы
![Page 122: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/122.jpg)
Что плохо?
87
Длинные CSS классы
Много файлов
![Page 123: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/123.jpg)
Что плохо?
87
Длинные CSS классы
Много файлов
Сборка и пересборка
![Page 124: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/124.jpg)
88
![Page 125: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/125.jpg)
в контексте HTML/CSSРадость
89
![Page 126: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/126.jpg)
в контексте HTML/CSSРадость
89
Порядок
![Page 127: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/127.jpg)
в контексте HTML/CSSРадость
89
Порядок
Независимость блоков
![Page 128: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/128.jpg)
в контексте HTML/CSSРадость
89
Порядок
Независимость блоков
Компиляция / оптимизация
![Page 129: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/129.jpg)
в контексте HTML/CSSРадость
89
Порядок
Независимость блоков
Компиляция / оптимизация
Станок (реиспользование кода)
![Page 130: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/130.jpg)
в контексте HTML/CSSРадость
89
Порядок
Независимость блоков
Компиляция / оптимизация
Станок (реиспользование кода)
Документируемость
![Page 131: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/131.jpg)
Пишем JavaScript
![Page 132: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/132.jpg)
Обычный JavaScript
![Page 133: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/133.jpg)
css/img/js/page.htmlindex.html
Файловая структура проекта
92
![Page 134: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/134.jpg)
<html> <head> <script src=”js/plugins/ui.js”/> <script src=”js/page.js”/> ...</html>
HTML-код страницы
93
![Page 135: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/135.jpg)
JavaScript по БЭМ!
![Page 136: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/136.jpg)
95
![Page 137: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/137.jpg)
96
![Page 138: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/138.jpg)
search/ ... search.css search.js
Файловая структура блока
97
![Page 139: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/139.jpg)
98
![Page 140: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/140.jpg)
JavaScript блоков
99
![Page 141: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/141.jpg)
blocks/ search/ ... search.js
JavaScript блоков
99
![Page 142: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/142.jpg)
blocks/ search/ ... search.js visualsearch/ visualsearch.js
JavaScript блоков
99
![Page 143: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/143.jpg)
Зависимости блоков
![Page 144: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/144.jpg)
({ shouldDeps: [
{ block: ‘visualsearch’ }
]})
search.deps.js
101
![Page 145: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/145.jpg)
bem build
102
![Page 146: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/146.jpg)
> bem build -T js -l blocks -d page.bemdecl.js -o pages/index -n index
bem build
102
![Page 147: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/147.jpg)
> bem build -T js -l blocks -d page.bemdecl.js -o pages/index -n index
> ls pages/index
bem build
102
![Page 148: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/148.jpg)
> 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
![Page 149: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/149.jpg)
/* visualsearch.js */...
/* search.js */var visualSearch = VS.init({ ...});
index.js
103
![Page 150: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/150.jpg)
Блоки, которых не видно
![Page 151: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/151.jpg)
105
![Page 152: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/152.jpg)
105
http://yandex.st/jquery/1.7.1/jquery.js
![Page 153: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/153.jpg)
106
![Page 154: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/154.jpg)
blocks/ backbone/ backbone.js underscore/ underscore.js
Вспомогательные блоки
107
![Page 155: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/155.jpg)
Что плохо?
108
Длинные CSS классы
Много файлов
Сборка и пересборка
![Page 156: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/156.jpg)
Что плохо?
108
Длинные CSS классы
Много файлов
Сборка и пересборка
Надо договариваться
![Page 157: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/157.jpg)
109
![Page 158: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/158.jpg)
в контексте JavaScriptРадость
110
![Page 159: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/159.jpg)
в контексте JavaScriptРадость
110
Порядок
![Page 160: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/160.jpg)
в контексте JavaScriptРадость
110
Порядок
Интеграция с HTML-вёрсткой
![Page 161: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/161.jpg)
в контексте JavaScriptРадость
110
Порядок
Интеграция с HTML-вёрсткой
Зависимости
![Page 162: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/162.jpg)
в контексте JavaScriptРадость
110
Порядок
Интеграция с HTML-вёрсткой
Зависимости
Компиляция
![Page 163: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/163.jpg)
в контексте JavaScriptРадость
110
Порядок
Интеграция с HTML-вёрсткой
Зависимости
Компиляция
Документируемость
![Page 164: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/164.jpg)
Натягивание рыбы
![Page 165: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/165.jpg)
112
![Page 166: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/166.jpg)
Обычно
![Page 167: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/167.jpg)
114
![Page 168: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/168.jpg)
Server-side по БЭМ!
![Page 170: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/170.jpg)
117
![Page 171: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/171.jpg)
118
![Page 172: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/172.jpg)
119
![Page 173: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/173.jpg)
119
![Page 174: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/174.jpg)
при управлении разработкойРадость
120
![Page 175: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/175.jpg)
при управлении разработкойРадость
120
Быстрее работают
![Page 176: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/176.jpg)
при управлении разработкойРадость
120
Быстрее работают
Больше делают
![Page 177: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/177.jpg)
121
![Page 178: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/178.jpg)
121
![Page 179: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/179.jpg)
Итоги
![Page 180: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/180.jpg)
Всеобщая радость
123
![Page 181: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/181.jpg)
Всеобщая радость
123
Модульность
![Page 182: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/182.jpg)
Всеобщая радость
123
Модульность
Единая предметная область
![Page 183: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/183.jpg)
Всеобщая радость
123
Модульность
Единая предметная область
Документируемость
![Page 184: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/184.jpg)
Всеобщая радость
123
Модульность
Единая предметная область
Документируемость
Компиляция
![Page 185: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/185.jpg)
Всеобщая радость
123
Модульность
Единая предметная область
Документируемость
Компиляция
Станок
![Page 186: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/186.jpg)
124
![Page 187: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/187.jpg)
124
![Page 188: Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"](https://reader033.vdocument.in/reader033/viewer/2022051817/5481dd96b4af9f617d8b46db/html5/thumbnails/188.jpg)
124