Владимир Варанкин — «БЭМ»
TRANSCRIPT
![Page 1: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/1.jpg)
![Page 2: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/2.jpg)
Разработчик интерфейсов
БЭМ
Владимир Варанкин
![Page 3: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/3.jpg)
Блок Элемент Модификатор
3
![Page 4: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/4.jpg)
Проекты в Яндексе
• Живут долго• Делаются быстро• Легко поддерживаются и развиваются• Большая команда• Много кода
4
![Page 5: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/5.jpg)
Методология
![Page 6: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/6.jpg)
Методология — учение об организации деятельности
6
![Page 7: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/7.jpg)
Принципы БЭМ-методологии
Методология
![Page 8: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/8.jpg)
Принципы БЭМ-методологии
• разделение кода на части
8
![Page 9: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/9.jpg)
Принципы БЭМ-методологии
• разделение кода на части• общая предметная область
9
![Page 10: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/10.jpg)
Общая предметная область
10
![Page 11: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/11.jpg)
Общая предметная область
11
![Page 12: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/12.jpg)
Общая предметная область
12
![Page 13: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/13.jpg)
Общая предметная область
13
![Page 14: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/14.jpg)
Общая предметная область
14
![Page 15: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/15.jpg)
Общая предметная область
15
![Page 16: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/16.jpg)
Принципы БЭМ-методологии
• разделение кода на части• общая предметная область• разделение ответственности
16
![Page 17: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/17.jpg)
Принципы БЭМ-методологии
• разделение кода на части• общая предметная область• разделение ответственности• повторное использование кода
17
![Page 18: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/18.jpg)
Принципы БЭМ-методологии
• разделение кода на части• общая предметная область• разделение ответственности• повторное использование кода• сборка кода в финальный runtime
18
![Page 19: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/19.jpg)
Определения
![Page 20: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/20.jpg)
Блок
20
![Page 21: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/21.jpg)
Блок
21
![Page 22: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/22.jpg)
Блок
22
![Page 23: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/23.jpg)
Блок
23
![Page 24: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/24.jpg)
Элемент
24
![Page 25: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/25.jpg)
Элемент
25
![Page 26: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/26.jpg)
Элемент
26
![Page 27: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/27.jpg)
Модификатор
27
![Page 28: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/28.jpg)
Модификатор
28
![Page 29: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/29.jpg)
Уровень переопределения
29
![Page 30: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/30.jpg)
Уровень переопределения
30
![Page 31: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/31.jpg)
Сборка
31
![Page 32: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/32.jpg)
Пример
![Page 33: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/33.jpg)
Карточка товара
Пример
![Page 34: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/34.jpg)
![Page 35: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/35.jpg)
Блок
35
![Page 36: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/36.jpg)
Элементы
36
![Page 37: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/37.jpg)
БЭМ-дерево
Пример
![Page 38: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/38.jpg)
БЭМ-дерево
38
![Page 39: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/39.jpg)
<block name="product"> <elem name="title"> Световой меч...</elem>
<elem name="picture" src="n52-105-medium.png"/>
<elem name="price"> <elem name="price-value" value="33700"/> </elem>
<elem name="info"> Хорошо держит форму...</elem>
...39
![Page 40: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/40.jpg)
Организация файловой структуры
Пример
![Page 41: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/41.jpg)
blocks/ └── product/
41
![Page 42: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/42.jpg)
blocks/ └── product/ └── product.css
42
![Page 43: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/43.jpg)
Технология
43
![Page 44: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/44.jpg)
blocks/ └── product/ ├── product.bemhtml ├── product.png ├── product.js └── product.css
44
![Page 45: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/45.jpg)
/* product.css */
.product{ color: #000;
font: 13px Verdana, sans-serif;}
45
![Page 46: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/46.jpg)
blocks/ └─ product/ ├─ title/ ├─ picture/ ├─ price/ ├─ price-value/ ├─ ... └─ product.css
46
![Page 47: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/47.jpg)
blocks/ └─ product/ ├─ title/ └─ product__title.css ├─ picture/ └─ product__picture.css ├─ ... └─ product.css
47
![Page 48: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/48.jpg)
Файлы → БЭМ-дерево
48
![Page 49: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/49.jpg)
/* product__title.css */
.product__title{ display: block;
font-size: 24px; font-weight: bold;
margin-left: -1ex;}
49
![Page 50: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/50.jpg)
blocks/ └─ product/ ├─ title/ ├─ picture/ ├─ price/ ├─ price-value/ ├─ ... └─ product.css
50
![Page 51: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/51.jpg)
/* product__price.css */
.product__price{ font-size: 12px;}
.product__price-value{ color: #390; font-size: 24px;}
51
![Page 52: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/52.jpg)
<html><body>
<div class="product"> <h1 class="product__title">...</h1> <img class="product__picture" src="..."/> <span class="product__price">...</span> <!-- ... --></div>
</body></html>
52
![Page 53: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/53.jpg)
Пришел менеджер...
Пример
![Page 54: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/54.jpg)
Пришел менеджер
54
![Page 55: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/55.jpg)
Пришел менеджер
55
![Page 56: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/56.jpg)
56
![Page 57: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/57.jpg)
57
![Page 58: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/58.jpg)
Блок
58
![Page 59: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/59.jpg)
Элементы
59
![Page 60: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/60.jpg)
БЭМ-дерево
Пример
![Page 61: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/61.jpg)
<block name="product"> <elem name="title"> Световой меч...</elem> <elem name="picture"> <block name="illustration"> <elem name="image" size="mid" src="n52-105-medium.png"/> <elem name="zoom"> Большое изображение</elem></block>
<elem name="price"> <elem name="price-value" value="33700"/><elem> <elem name="info"> Хорошо держит форму...</elem>
...61
![Page 62: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/62.jpg)
Файловая структура
Пример
![Page 63: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/63.jpg)
blocks/ ├─ product/ └─ illustration/
63
![Page 64: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/64.jpg)
blocks/ ├─ product/ └─ illustration/ ├─ image/ └─ illustration__image.css └─ zoom/ ├─ illustration__zoom.css └─ illustration__zoom.png
64
![Page 65: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/65.jpg)
blocks/ ├─ product/ └─ illustration/ ├─ image/ ├─ _size/ ├─ illustration__image_size_sm.css ├─ illustration__image_size_mid.css └─ illustration__image_size_big.css └─ illustration__image.css └─ zoom/ └─ ...
65
![Page 66: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/66.jpg)
66
![Page 67: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/67.jpg)
blocks/ ├─ product/ └─ illustration/ ├─ image/ ├─ _size/ ├─ illustration__image_size_sm.css ├─ illustration__image_size_mid.css ├─ illustration__image_size_big.css └─ illustration__image_size_big.png └─ illustration__image.css └─ zoom/ └─ ...
67
![Page 68: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/68.jpg)
/* illustration__image_size_mid.css */
. illustration__image_size_mid{ display: block;
width: 300px;}
68
![Page 69: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/69.jpg)
blocks/ ├─ product/ └─ illustration/ ├─ image/ └─ ... ├─ zoom/ └─ ... └─ illustration.js
69
![Page 70: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/70.jpg)
// illustration.js
(function($, undefined) {
$('.illustration__zoom').on('click', function() {
var sizeBig = $(this).data('size-big');
// ...
})
}(jQuery));
70
![Page 71: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/71.jpg)
<html><body><div class="product"> <h1 class="product__title">...</h1> <div class="product__picture illustration"> <img class="illustration__image illustration__image_size_mid" src="..."/> <span class="illustration__zoom" data-size-big="...">...</span> </div> <span class="product__price">...</span> <!-- ... --></div></body></html>
71
![Page 72: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/72.jpg)
<html><body><div class="product"> <h1 class="product__title">...</h1> <div class="product__picture illustration"> <img class="illustration__image illustration__image_size_mid" src="..."/> <span class="illustration__zoom" data-size-big="...">...</span> </div> <span class="product__price">...</span> <!-- ... --></div></body></html>
72
![Page 73: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/73.jpg)
<html><body><div class="product"> <h1 class="product__title">...</h1> <div class="product__picture illustration"> <img class="illustration__image illustration__image_size_mid" src="..."/> <span class="illustration__zoom" data-size-big="...">...</span> </div> <span class="product__price">...</span> <!-- ... --></div></body></html>
73
events.yandex.ru/talks/293
![Page 74: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/74.jpg)
Утилиты
![Page 76: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/76.jpg)
Утилита для работы с файлами, написанными по БЭМ-методу
BEM tools
76
github.com/bem/bem-tools
![Page 77: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/77.jpg)
Создание сущностей
Сборка финального runtime
Разработческий сервер
...
BEM tools
77
![Page 78: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/78.jpg)
BEM tools
› bem --help
78
![Page 79: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/79.jpg)
BEM tools
› bem --help
Tools to work with files written using the BEM-method.See http://bem.github.com/bem-method/ for more info.
Usage: bem COMMAND [OPTIONS] [ARGS] bem [OPTIONS] [ARGS]
Commands: create : Create of entities tool. build : Build tool. server : Development server. make : BEM make. decl : Usage declaration manipulation tool. completion : Shell completion.79
![Page 80: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/80.jpg)
BEM tools
› bem --help
Tools to work with files written using the BEM-method.See http://bem.github.com/bem-method/ for more info.
Usage: bem COMMAND [OPTIONS] [ARGS] bem [OPTIONS] [ARGS]
Commands: create : Create of entities tool. build : Build tool. server : Development server. make : BEM make. decl : Usage declaration manipulation tool. completion : Shell completion.80
![Page 81: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/81.jpg)
bem create:создание БЭМ-сущностей
BEM Tools
![Page 82: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/82.jpg)
bem create
– уровни переопределения– блоки– элементы– модификаторы
82
![Page 83: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/83.jpg)
bem create
› bem create --help
83
![Page 84: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/84.jpg)
bem create
› bem create --help
Usage: bem create COMMAND [OPTIONS] [ARGS] bem create [OPTIONS] [ARGS]
Commands: level : Level. block : Block. elem : Block element. mod : Modifier.
84
![Page 85: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/85.jpg)
bem create
› bem create block --help
85
![Page 86: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/86.jpg)
bem create
› bem create block --help
Usage: bem create block [OPTIONS] [ARGS]
Options: -h, --help : Help -C DIR, --chdir=DIR : change process working directory, cwd by default; to specify level use --level, -l option instead -t ADDTECH, --add-tech=ADDTECH : add tech -T FORCETECH, --force-tech=FORCETECH : use only specified tech -n NOTECH, --no-tech=NOTECH : exclude tech -l LEVEL, --level=LEVEL : level directory path, default: ./ -f, --force : force files creation
Arguments: NAMES : blocks names
86
![Page 87: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/87.jpg)
bem create
› bem create block illustration --level=blocks --add-tech=css
87
![Page 88: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/88.jpg)
bem create
› bem create block illustration --level=blocks --add-tech=css
blocks/ └─ illustration/ └─ illustration.css
88
![Page 89: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/89.jpg)
bem create
› bem create mod size --level=blocks
--block=illustration
--elem=image
--val=mid
--add-tech=css
89
![Page 90: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/90.jpg)
bem create
› bem create mod size --level=blocks
--block=illustration
--elem=image
--val=mid
--add-tech=css
blocks/ └─ illustration/ └─ image/ └─ _size/ └─ illustration__image_size_mid.css
90
![Page 91: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/91.jpg)
bem build:сборка файлов страниц
BEM Tools
![Page 92: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/92.jpg)
bem build
Собирает файлы страниц в различных технологиях, основываясь на декларации.
92
![Page 93: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/93.jpg)
bem build
› bem build --help
93
![Page 94: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/94.jpg)
БЭМ дерево ⟹ Декларация ⟹ Страница
bem build
94
![Page 95: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/95.jpg)
bem build
› bem build [...] -o pages/index -n index
--tech=css
--level=blocks
95
![Page 96: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/96.jpg)
bem build
› bem build [...] -o pages/index -n index
--tech=css
--level=blocks
pages/ └─ index/ └─ index.css
96
![Page 97: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/97.jpg)
/* index.css */
@import url(blocks/product/product.css);@import url(blocks/product/title/...);@import url(blocks/product/picture/...);...@import url(blocks/illustration/figure.css);@import url(blocks/illustration/image/...);...
97
![Page 98: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/98.jpg)
bem build
› bem build [...] -o pages/index -n index --tech=js --level=blocks
98
![Page 99: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/99.jpg)
bem build
› bem build [...] -o pages/index -n index --tech=js --level=blocks
pages/ └─ index/ └─ index.js
99
![Page 100: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/100.jpg)
/* index.js */
/*borschik:include:blocks/product/product.js*//*borschik:include:blocks/product/title/...*//*borschik:include:blocks/product/picture/...*/.../*borschik:include:blocks/illustration/illustration.js*//*borschik:include:blocks/illustration/image/...*/...
100
![Page 101: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/101.jpg)
bem build
pages/ └─ index/ ├─ index.html ├─ index.xsl ├─ index.bemhtml.js ├─ index.js ├─ index.css ├─ index.ie.css ├─ index.coffee └─ index.ts
101
![Page 102: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/102.jpg)
bem build
pages/ └─ index/ ├─ index.html ├─ index.xsl ├─ index.bemhtml.js ├─ index.js ├─ index.css ├─ index.ie.css ├─ index.coffee └─ index.ts
102
events.yandex.ru/talks/289/
![Page 103: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/103.jpg)
Пришел менеджер...
Пример
![Page 104: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/104.jpg)
Пришел менеджер
104
![Page 105: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/105.jpg)
Пришел менеджер
105
![Page 106: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/106.jpg)
Пришел менеджер
106
![Page 107: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/107.jpg)
Пришел менеджер...
107
![Page 108: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/108.jpg)
БЭМ-дерево
Пример
![Page 109: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/109.jpg)
<block name="product"> <elem name="title"> Световой меч...</elem> <elem name="picture"> <block name="illustration"> <elem name="image" size="mid" src="n52-105-medium.png"/> <elem name="zoom"> Большое изображение</elem></block>
<elem name="price"> <elem name="price-value" value="33700"/><elem>
<elem name="order-btn">Заказать<elem>
<elem name="info"> Хорошо держит форму...</elem>
...109
![Page 110: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/110.jpg)
„Заказывать товары можно только с некоторых страниц
o_O`
110
![Page 111: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/111.jpg)
Файловая структура
Пример
![Page 112: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/112.jpg)
› bem create level blocks-store
112
![Page 113: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/113.jpg)
blocks/ ├─ product/ └─ illustration/blocks-store/
113
![Page 114: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/114.jpg)
blocks/ ├─ product/ └─ illustration/blocks-store/ └─ product/
114
![Page 115: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/115.jpg)
blocks/ ├─ product/ └─ illustration/blocks-store/ └─ product/ ├─ product.bemhtml ├─ product.sass └─ product.js
115
![Page 116: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/116.jpg)
blocks/ ├─ product/ └─ illustration/blocks-store/ └─ product/ ├─ order-btn/ └─ product__order-btn.sass └─ ...
116
![Page 117: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/117.jpg)
117
![Page 118: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/118.jpg)
blocks/ ├─ product/ └─ illustration/blocks-store/ ├─ product/ ├─ order-btn/ └─ ... └─ button/ ├─ button.js └─ button.sass
118
![Page 119: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/119.jpg)
› bem build [...] -o pages/store -n store --tech=sass --tech=js --level=blocks --level=blocks-store
119
![Page 120: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/120.jpg)
› bem build [...] -o pages/store -n store --tech=sass --tech=js --level=blocks --level=blocks-store
120
![Page 121: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/121.jpg)
pages/ ├─ index/ └─ store/ ├─ store.html ├─ store.css ├─ store.sass └─ store.js
121
![Page 122: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/122.jpg)
/* store.sass */
@import url(blocks/product/product.css);@import url(blocks-store/product/product.sass);@import url(blocks/product/title/...);@import url(blocks/product/picture/...);@import url(blocks-store/product/order-btn/...);@import url(blocks-store/button/button.sass);...@import url(blocks/illustration/illustration.css);@import url(blocks/illustration/image/...);...
122
![Page 123: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/123.jpg)
Что-то еще?
![Page 124: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/124.jpg)
124
![Page 125: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/125.jpg)
125
![Page 126: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/126.jpg)
126
![Page 127: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/127.jpg)
127
![Page 128: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/128.jpg)
Материалы
![Page 129: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/129.jpg)
bem.infogithub.com/bem
Материалы
129
![Page 130: Владимир Варанкин — «БЭМ»](https://reader033.vdocuments.mx/reader033/viewer/2022051413/55878973d8b42a4c318b465b/html5/thumbnails/130.jpg)
Разработчик интерфейсов
Владимир Варанкин
github.com/narqo