Contenu connexe Similaire à Владимир Варанкин — «БЭМ» Similaire à Владимир Варанкин — «БЭМ» (20) 3. Блок
Элемент
Модификатор
3
4. Проекты в Яндексе
• Живут долго
• Делаются быстро
• Легко поддерживаются и развиваются
• Большая команда
• Много кода
4
17. Принципы БЭМ-методологии
• разделение кода на части
• общая предметная область
• разделение ответственности
• повторное использование кода
17
18. Принципы БЭМ-методологии
• разделение кода на части
• общая предметная область
• разделение ответственности
• повторное использование кода
• сборка кода в финальный runtime
18
39. <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
42. blocks/
└── product/
└── product.css
42
44. blocks/
└── product/
├── product.bemhtml
├── product.png
├── product.js
└── product.css
44
46. blocks/
└─ product/
├─ title/
├─ picture/
├─ price/
├─ price-value/
├─ ...
└─ product.css
46
47. blocks/
└─ product/
├─ title/
└─ product__title.css
├─ picture/
└─ product__picture.css
├─ ...
└─ product.css
47
49. /* product__title.css */
.product__title
{
display: block;
font-size: 24px;
font-weight: bold;
margin-left: -1ex;
}
49
50. blocks/
└─ product/
├─ title/
├─ picture/
├─ price/
├─ price-value/
├─ ...
└─ product.css
50
51. /* product__price.css */
.product__price
{
font-size: 12px;
}
.product__price-value
{
color: #390;
font-size: 24px;
}
51
52. <html>
<body>
<div class="product">
<h1 class="product__title">...</h1>
<img class="product__picture"
src="..."/>
<span class="product__price">...</span>
<!-- ... -->
</div>
</body>
</html>
52
61. <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
63. blocks/
├─ product/
└─ illustration/
63
64. blocks/
├─ product/
└─ illustration/
├─ image/
└─ illustration__image.css
└─ zoom/
├─ illustration__zoom.css
└─ illustration__zoom.png
64
65. 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
67. 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
69. blocks/
├─ product/
└─ illustration/
├─ image/
└─ ...
├─ zoom/
└─ ...
└─ illustration.js
69
70. // illustration.js
(function($, undefined) {
$('.illustration__zoom').on('click', function() {
var sizeBig = $(this).data('size-big');
// ...
})
}(jQuery));
70
71. <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
72. <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
73. <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>
events.yandex.ru/talks/293
<!-- ... -->
</div>
</body>
</html>
73
76. BEM tools
Утилита для работы с файлами, написанными по БЭМ-методу
github.com/bem/bem-tools
76
77. BEM tools
Создание сущностей
Сборка финального runtime
Разработческий сервер
...
77
79. 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.
79
completion : Shell completion.
80. 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.
80
completion : Shell completion.
82. bem create
– уровни переопределения
– блоки
– элементы
– модификаторы
82
84. 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
86. 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
87. bem create
› bem create block illustration --level=blocks --add-tech=css
87
88. bem create
› bem create block illustration --level=blocks --add-tech=css
blocks/
└─ illustration/
└─ illustration.css
88
89. bem create
› bem create mod size --level=blocks
--block=illustration
--elem=image
--val=mid
--add-tech=css
89
90. 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
92. bem build
Собирает файлы страниц в различных технологиях,
основываясь на декларации.
92
94. bem build
БЭМ дерево ⟹ Декларация ⟹ Страница
94
95. bem build
› bem build [...] -o pages/index -n index
--tech=css
--level=blocks
95
96. bem build
› bem build [...] -o pages/index -n index
--tech=css
--level=blocks
pages/
└─ index/
└─ index.css
96
97. /* 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
98. bem build
› bem build [...] -o pages/index -n index
--tech=js
--level=blocks
98
99. bem build
› bem build [...] -o pages/index -n index
--tech=js
--level=blocks
pages/
└─ index/
└─ index.js
99
100. /* 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
101. bem build
pages/
└─ index/
├─ index.html
├─ index.xsl
├─ index.bemhtml.js
├─ index.js
├─ index.css
├─ index.ie.css
├─ index.coffee
└─ index.ts
101
102. bem build
pages/
└─ index/
├─ index.html
├─ index.xsl
├─ index.bemhtml.js
├─ index.js
├─ index.css
├─ index.ie.css
├─ index.coffee
events.yandex.ru/talks/289/
└─ index.ts
102
109. <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
...
113. blocks/
├─ product/
└─ illustration/
blocks-store/
113
114. blocks/
├─ product/
└─ illustration/
blocks-store/
└─ product/
114
115. blocks/
├─ product/
└─ illustration/
blocks-store/
└─ product/
├─ product.bemhtml
├─ product.sass
└─ product.js
115
116. blocks/
├─ product/
└─ illustration/
blocks-store/
└─ product/
├─ order-btn/
└─ product__order-btn.sass
└─ ...
116
118. blocks/
├─ product/
└─ illustration/
blocks-store/
├─ product/
├─ order-btn/
└─ ...
└─ button/
├─ button.js
└─ button.sass
118
119. › bem build [...] -o pages/store -n store
--tech=sass
--tech=js
--level=blocks
--level=blocks-store
119
120. › bem build [...] -o pages/store -n store
--tech=sass
--tech=js
--level=blocks
--level=blocks-store
120
121. pages/
├─ index/
└─ store/
├─ store.html
├─ store.css
├─ store.sass
└─ store.js
121
122. /* 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
