Владимир Варанкин — «БЭМ»

Разработчик интерфейсов

БЭМ

Владимир Варанкин

Блок Элемент Модификатор

3

Проекты в Яндексе

• Живут долго• Делаются быстро• Легко поддерживаются и развиваются• Большая команда• Много кода

4

Методология

Методология — учение об организации деятельности

6

Принципы БЭМ-методологии

Методология


• разделение кода на части

8


• разделение кода на части• общая предметная область

9

Общая предметная область

10


11


12


13


14


15


• разделение кода на части• общая предметная область• разделение ответственности

16


• разделение кода на части• общая предметная область• разделение ответственности• повторное использование кода

17


• разделение кода на части• общая предметная область• разделение ответственности• повторное использование кода• сборка кода в финальный runtime

18

Определения

Блок

20

Блок

21

Блок

22

Блок

23

Элемент

24

Элемент

25

Элемент

26

Модификатор

27

Модификатор

28

Уровень переопределения

29

Уровень переопределения

30

Сборка

31

Пример

Карточка товара

Пример

Блок

35

Элементы

36

БЭМ-дерево

Пример

БЭМ-дерево

38

<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

Организация файловой структуры

Пример

blocks/ └── product/

41

blocks/ └── product/ └── product.css

42

Технология

43

blocks/ └── product/ ├── product.bemhtml ├── product.png ├── product.js └── product.css

44

/* product.css */

.product{ color: #000;

font: 13px Verdana, sans-serif;}

45

blocks/ └─ product/ ├─ title/ ├─ picture/ ├─ price/ ├─ price-value/ ├─ ... └─ product.css

46

blocks/ └─ product/ ├─ title/ └─ product__title.css ├─ picture/ └─ product__picture.css ├─ ... └─ product.css

47

Файлы → БЭМ-дерево

48

/* product__title.css */

.product__title{ display: block;

font-size: 24px; font-weight: bold;

margin-left: -1ex;}

49

blocks/ └─ product/ ├─ title/ ├─ picture/ ├─ price/ ├─ price-value/ ├─ ... └─ product.css

50

/* product__price.css */

.product__price{ font-size: 12px;}

.product__price-value{ color: #390; font-size: 24px;}

51

<html><body>

<div class="product"> <h1 class="product__title">...</h1> <img class="product__picture" src="..."/> <span class="product__price">...</span> </div>

</body></html>

52

Пришел менеджер...

Пример

Пришел менеджер

54


55

56

57

Блок

58

Элементы

59

БЭМ-дерево

Пример

<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

Файловая структура

Пример

blocks/ ├─ product/ └─ illustration/

63

blocks/ ├─ product/ └─ illustration/ ├─ image/ └─ illustration__image.css └─ zoom/ ├─ illustration__zoom.css └─ illustration__zoom.png

64

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

66

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

/* illustration__image_size_mid.css */

. illustration__image_size_mid{ display: block;

width: 300px;}

68

blocks/ ├─ product/ └─ illustration/ ├─ image/ └─ ... ├─ zoom/ └─ ... └─ illustration.js

69

// illustration.js

(function($, undefined) {

$('.illustration__zoom').on('click', function() {

var sizeBig = $(this).data('size-big');

// ...

})

}(jQuery));

70

<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


73

events.yandex.ru/talks/293

http://events.yandex.ru/talks/293/


http://events.yandex.ru/talks/293

http://events.yandex.ru/talks/293

Утилиты

github.com/bem/bem-tools

75

http://github.com/bem/bem-tools


Утилита для работы с файлами, написанными по БЭМ-методу

BEM tools

76

github.com/bem/bem-tools



Создание сущностей

Сборка финального runtime

Разработческий сервер

...

BEM tools

77

BEM tools

› bem --help

78

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

http://bem.github.com/bem-method/


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



bem create:создание БЭМ-сущностей

BEM Tools

bem create

– уровни переопределения– блоки– элементы– модификаторы

82

bem create

› bem create --help

83

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

bem create

› bem create block --help

85

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

bem create

› bem create block illustration --level=blocks --add-tech=css

87

bem create

› bem create block illustration --level=blocks --add-tech=css

blocks/ └─ illustration/ └─ illustration.css

88

bem create

› bem create mod size --level=blocks

--block=illustration

--elem=image

--val=mid

--add-tech=css

89

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

bem build:сборка файлов страниц

BEM Tools

bem build

Собирает файлы страниц в различных технологиях, основываясь на декларации.

92

bem build

› bem build --help

93

БЭМ дерево ⟹ Декларация ⟹ Страница

bem build

94

bem build

› bem build [...] -o pages/index -n index

--tech=css

--level=blocks

95

bem build

› bem build [...] -o pages/index -n index

--tech=css

--level=blocks

pages/ └─ index/ └─ index.css

96

/* 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

bem build

› bem build [...] -o pages/index -n index --tech=js --level=blocks

98

bem build

› bem build [...] -o pages/index -n index --tech=js --level=blocks

pages/ └─ index/ └─ index.js

99

/* 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

bem build

pages/ └─ index/ ├─ index.html ├─ index.xsl ├─ index.bemhtml.js ├─ index.js ├─ index.css ├─ index.ie.css ├─ index.coffee └─ index.ts

101

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/






Пример


104


105


106


107

БЭМ-дерево

Пример

<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

„Заказывать товары можно только с некоторых страниц

o_O`

110

Файловая структура

Пример

› bem create level blocks-store

112

blocks/ ├─ product/ └─ illustration/blocks-store/

113

blocks/ ├─ product/ └─ illustration/blocks-store/ └─ product/

114

blocks/ ├─ product/ └─ illustration/blocks-store/ └─ product/ ├─ product.bemhtml ├─ product.sass └─ product.js

115

blocks/ ├─ product/ └─ illustration/blocks-store/ └─ product/ ├─ order-btn/ └─ product__order-btn.sass └─ ...

116

117

blocks/ ├─ product/ └─ illustration/blocks-store/ ├─ product/ ├─ order-btn/ └─ ... └─ button/ ├─ button.js └─ button.sass

118

› bem build [...] -o pages/store -n store --tech=sass --tech=js --level=blocks --level=blocks-store

119

› bem build [...] -o pages/store -n store --tech=sass --tech=js --level=blocks --level=blocks-store

120

pages/ ├─ index/ └─ store/ ├─ store.html ├─ store.css ├─ store.sass └─ store.js

121

/* 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

Что-то еще?

124

125

126

127

Материалы

bem.infogithub.com/bem

Материалы

129

http://bem.info/

http://bem.info/

http://github.com/bem/

http://github.com/bem/

Разработчик интерфейсов

[email protected]

Владимир Варанкин

github.com/narqo

mailto:[email protected]

mailto:[email protected]

mailto:http://github.com/narqo?subject=

mailto:http://github.com/narqo?subject=

Technology

Владимир Варанкин — «БЭМ»