Сергей Бережной, Варвара Степанова "Как...

Я.Субботник, Челябинск, 25 февраля 2012 года

Варвара Степановаразработчик интерфейсов

#БЭМ

Как использовать БЭМ!вне Яндекса

photosight.ru

2

3

photosight.ru

4

6

HTML/CSS верстальщик

7

JavaScript программист

+

8

Front-end разработчик

9

Серверный разработчик

10

Разработчик “под ключ”

11

Руководитель разработки

Я.Субботник, Челябинск, 25 февраля 2012 года

Варвара Степановаразработчик интерфейсов

#БЭМ

Как использовать БЭМ!вне Яндекса

БЭМ!

14

Блок

Блок

15

<div class=”search”> <!-- // --></div>

HTML-код блока

16

search/ __input/ search__input.css __button/ search__button.css

search.css

Файлы блока

17

18

Элемент

19

Блок с элементами

Элемент

20

<div class=”search”> <input class=”search__input” .../> <span class=”search__button”> ... </span></div>

HTML код элементов

21

search/ __input/ search__input.css __button/ search__button.css

search.css

Файлы элементов

22

Модификатор

23

Модификатор

24

<div class=”search search_bg_red”> ...</div>

HTML код модификатора

25

search/ _color/ search_bg_red.css search.css

Файлы модификаторов

26

photosight.ru

27

28

29

30

bem.github.com/bem-method

31

Делаем обычный сайт

33

HTML/CSS вёрстка

Традиционная вёрстка

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

36

css/

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

36

css/img/

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

36

css/img/page.html

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

36

css/img/page.htmlindex.html

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

36

#head { /* ... */}#head a { /* ... */}

Обычный CSS файл

37

Вёрстка по БЭМ!

39

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

40

blocks/

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

40

blocks/ head/ auth/ search/ footer/

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

40

blocks/ head/ auth/ search/ footer/

pages/

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

40

blocks/ head/ auth/ search/ footer/

pages/ index/ proCle/ order/

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

40

41

search/ _bg/ search_bg_red.css __input/ search__input.css search__input.ie.css search.css

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

42

github.com/bem/bem-tools

43

bem create

44

> bem create block search

bem create

44

> bem create block search> bem create elem -b search input

bem create

44

> bem create block search> bem create elem -b search input> bem create mod -b search size -v big

bem create

44

> bem create block search> bem create elem -b search input> bem create mod -b search size -v big

> bem create --help

bem create

44

Шаблоны технологий

.search {}

.search__input {}

.search_bg_red {}

> bem create -T css ...

46

clck.ru/0QqW1

47

Сборка

49

50

Декларация

52

exports.blocks = [ { block: ‘head’ }, { block: ‘footer’ }, { block: ‘search’ }, ...]

page.bemdecl.js

53

Превращение

54

index.bemdecl.js ⇉

Превращение

54

index.bemdecl.js ⇉ index.cssindex.ie.css

Превращение

54

@import(blocks/head/head.css);@import(blocks/search/search.css);@import(blocks/search/_bg/search_bg_red.css);@import(blocks/search/__input/search__input.css);@import(blocks/search/__button/search__button.css);...

index.css

55

@import(index.css);@import(blocks/search/__input/search__input.ie.css);@import(blocks/search/__button/search__button.ie.css);...

index.ie.css

56

bem build

57

> bem build

bem build

57

> bem build -T css

bem build

57

> bem build -T css -l blocks -d page.bemdecl.js

bem build

57

> bem build -T css -l blocks -d page.bemdecl.js -o pages/index -n index

bem build

57

> bem build -T css -l blocks -d page.bemdecl.js -o pages/index -n index

> ls pages/index

bem build

57

> bem build -T css -l blocks -d page.bemdecl.js -o pages/index -n index

> ls pages/indexindex.bemdecl.js index.css

bem build

57

bem build

58

> bem build -T ie.css -l blocks -d page.bemdecl.js -o pages/index -n index

bem build

58

> bem build -T ie.css -l blocks -d page.bemdecl.js -o pages/index -n index

> ls pages/index

bem build

58

> bem build -T ie.css -l blocks -d page.bemdecl.js -o pages/index -n index

> ls pages/indexindex.bemdecl.js index.css index.ie.css

bem build

58

bem build

59

> bem build --help

bem build

59

Система сборки

61

GNU Make

clck.ru/089oL

62

Оптимизация

64

@import(blocks/head/head.css);@import(blocks/search/search.css);@import(blocks/search/_bg/search_bg_red.css);@import(blocks/search/__input/search__input.css);@import(blocks/search/__button/search__button.css);...

index.css

65

.head { /* ... */}.search { /* ... */}.search_bg_red { /* .. */}

_index.css

66

borschik

67

> borschik

borschik

67

> borschik -i pages/index/index.css

borschik

67

> borschik -i pages/index/index.css -o pages/index/_index.css

borschik

67

Утилиты

68

Утилиты

сБорщик https://github.com/veged/borschik

68

Утилиты

сБорщик https://github.com/veged/borschik

CSSO https://github.com/afelix/csso

68

Утилиты

сБорщик https://github.com/veged/borschik

CSSO https://github.com/afelix/csso

Сеточка https://github.com/afelix/setochka

68

bem server

bem server

70

> bem server

bem server

70

71

@import url(blocks/i-reset/i-reset.css);@import url(blocks/b-page/b-page.css);@import url(blocks/b-description/b-description.css);@import url(blocks/b-link/b-link.css);@import url(blocks/b-page-title/b-page-title.css);@import url(blocks/b-blocks-list/b-blocks-list.css);@import url(blocks/b-blocks-desc/b-blocks-desc.css);@import url(blocks/b-text/b-text.css);@import url(blocks/i-desc/_type/i-desc_type_mod.css);@import url(blocks/i-desc/_type/i-desc_type_elem.css);

index.css

72

73

74

clck.ru/0Q9UF

Внесение изменений

76

77

78

79

80

github.com/bem/bem-haml

81

- DECL :search do |content|  %form.search    = DO content

- DECL :search__input  %input.search__input

- DECL :search__button do |content|  %button.search__button    = DO content

search.haml

82

- DECL :search do |content|  - DO :search__input  - DO :search__button    Найти

index.haml

83

index.bemdecl.js ⇉ index.cssindex.ie.css

Превращение

84

index.bemdecl.js ⇉ index.cssindex.ie.css

Превращение

84

index.haml ⇉

index.bemdecl.js ⇉ index.cssindex.ie.css

Превращение

84

index.haml ⇉ index.html

Документация

86

Что плохо?

87

Что плохо?

87

Длинные CSS классы

Что плохо?

87

Длинные CSS классы

Много файлов

Что плохо?

87

Длинные CSS классы

Много файлов

Сборка и пересборка

88

в контексте HTML/CSSРадость

89

в контексте HTML/CSSРадость

89

Порядок

в контексте HTML/CSSРадость

89

Порядок

Независимость блоков

в контексте HTML/CSSРадость

89

Порядок

Независимость блоков

Компиляция / оптимизация

в контексте HTML/CSSРадость

89

Порядок

Независимость блоков

Компиляция / оптимизация

Станок (реиспользование кода)

в контексте HTML/CSSРадость

89

Порядок

Независимость блоков

Компиляция / оптимизация

Станок (реиспользование кода)

Документируемость

Пишем JavaScript

Обычный JavaScript

css/img/js/page.htmlindex.html

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

92

<html> <head> <script src=”js/plugins/ui.js”/> <script src=”js/page.js”/> ...</html>

HTML-код страницы

93

JavaScript по БЭМ!

95

96

search/ ... search.css search.js

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

97

98

JavaScript блоков

99

blocks/ search/ ... search.js

JavaScript блоков

99

blocks/ search/ ... search.js visualsearch/ visualsearch.js

JavaScript блоков

99

Зависимости блоков

({ shouldDeps: [

{ block: ‘visualsearch’ }

]})

search.deps.js

101

bem build

102

> bem build -T js -l blocks -d page.bemdecl.js -o pages/index -n index

bem build

102

> bem build -T js -l blocks -d page.bemdecl.js -o pages/index -n index

> ls pages/index

bem build

102

> bem build -T js -l blocks -d page.bemdecl.js -o pages/index -n index

> ls pages/indexindex.bemdecl.js ... index.js

bem build

102

/* visualsearch.js */...

/* search.js */var visualSearch = VS.init({ ...});

index.js

103

Блоки, которых не видно

105

105

http://yandex.st/jquery/1.7.1/jquery.js

106

blocks/ backbone/ backbone.js underscore/ underscore.js

Вспомогательные блоки

107

Что плохо?

108

Длинные CSS классы

Много файлов

Сборка и пересборка

Что плохо?

108

Длинные CSS классы

Много файлов

Сборка и пересборка

Надо договариваться

109

в контексте JavaScriptРадость

110

в контексте JavaScriptРадость

110

Порядок

в контексте JavaScriptРадость

110

Порядок

Интеграция с HTML-вёрсткой

в контексте JavaScriptРадость

110

Порядок

Интеграция с HTML-вёрсткой

Зависимости

в контексте JavaScriptРадость

110

Порядок

Интеграция с HTML-вёрсткой

Зависимости

Компиляция

в контексте JavaScriptРадость

110

Порядок

Интеграция с HTML-вёрсткой

Зависимости

Компиляция

Документируемость

Натягивание рыбы

112

Обычно

114

Server-side по БЭМ!

116

github.com/bem/bem-django

117

118

119

119

при управлении разработкойРадость

120

при управлении разработкойРадость

120

Быстрее работают

при управлении разработкойРадость

120

Быстрее работают

Больше делают

121

121

Итоги

Всеобщая радость

123

Всеобщая радость

123

Модульность

Всеобщая радость

123

Модульность

Единая предметная область

Всеобщая радость

123

Модульность

Единая предметная область

Документируемость

Всеобщая радость

123

Модульность

Единая предметная область

Документируемость

Компиляция

Всеобщая радость

123

Модульность

Единая предметная область

Документируемость

Компиляция

Станок

124

124

124

125

clck.ru/WVmV

ВАКА

НСИ

Я

Варвара Степановаtoivonen@yandex-team.ru

toivonens

#БЭМ#yasubbotnik