Есть мнение, что БЭМ! можно применять только в Яндексе и подобных больших компаниях для сложных проектов. Мы расскажем, почему это не так. Доклад ориентирован на любого веб-разработчика, а примеры будут основываться на таких задачах как: вёрстка HTML+CSS по PSD, написание JS компонент, сборка динамического сайта с использованием PHP/Django/RoR.

1. Как использовать БЭМ!
вне Яндекса
Варвара Степанова
разработчик интерфейсов
#БЭМ
Я.Субботник, Челябинск, 25 февраля 2012 года

2. 2
photosight.ru

3. 3

4. 4
photosight.ru

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

7. JavaScript программист
+
7

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

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

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

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

12. Как использовать БЭМ!
вне Яндекса
Варвара Степанова
разработчик интерфейсов
#БЭМ
Я.Субботник, Челябинск, 25 февраля 2012 года

13. БЭМ!

14. Блок
14

15. Блок
15

16. HTML-код блока
<div class=”search”>
<!-- // -->
</div>
16

17. Файлы блока
search/
__input/
search__input.css
__button/
search__button.css
search.css
17

18. Элемент
18

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

20. Элемент
20

21. HTML код элементов
<div class=”search”>
<input class=”search__input” .../>
<span class=”search__button”>
...
</span>
</div>
21

22. Файлы элементов
search/
__input/
search__input.css
__button/
search__button.css
search.css
22

23. Модификатор
23

24. Модификатор
24

25. HTML код модификатора
<div class=”search
search_bg_red”>
...
</div>
25

26. Файлы модификаторов
search/
_color/
search_bg_red.css
search.css
26

27. 27
photosight.ru

28. 28

29. 29

30. 30

31. bem.github.com/bem-method
31

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

33. 33

34. HTML/CSS вёрстка

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

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

37. Файловая структура проекта
css/
36

38. Файловая структура проекта
css/
img/
36

39. Файловая структура проекта
css/
img/
page.html
36

40. Файловая структура проекта
css/
img/
page.html
index.html
36

41. Обычный CSS файл
#head {
/* ... */
}
#head a {
/* ... */
}
37

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

43. 39

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

45. Файловая структура проекта
blocks/
40

46. Файловая структура проекта
blocks/
head/
auth/
search/
footer/
40

47. Файловая структура проекта
blocks/ pages/
head/
auth/
search/
footer/
40

48. Файловая структура проекта
blocks/ pages/
head/ index/
auth/ profile/
search/ order/
footer/
40

49. 41

50. Файловая структура блока
search/
_bg/
search_bg_red.css
__input/
search__input.css
search__input.ie.css
search.css
42

51. github.com/bem/bem-tools
43

52. bem create
44

53. bem create
> bem create block search
44

54. bem create
> bem create block search
> bem create elem -b search input
44

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

56. bem create
> bem create block search
> bem create elem -b search input
> bem create mod -b search size -v big
> bem create --help
44

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

58. > bem create -T css ...
.search {
}
.search__input {
}
.search_bg_red {
}
46

59. clck.ru/0QqW1
47

60. Сборка

61. 49

62. 50

63. Декларация

64. 52

65. page.bemdecl.js
exports.blocks = [
{ block: ‘head’ },
{ block: ‘footer’ },
{ block: ‘search’ },
...
]
53

66. Превращение
54

67. Превращение
index.bemdecl.js ⇉
54

68. Превращение
index.bemdecl.js ⇉ index.css
index.ie.css
54

69. index.css
@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);
...
55

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

71. bem build
57

72. bem build
> bem build
57

73. bem build
> bem build
-T css
57

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

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

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

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

78. bem build
58

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

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

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

82. bem build
59

83. bem build
> bem build --help
59

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

85. GNU Make
61

86. clck.ru/089oL
62

87. Оптимизация

88. 64

89. index.css
@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);
...
65

90. _index.css
.head {
/* ... */
}
.search {
/* ... */
}
.search_bg_red {
/* .. */
}
66

91. borschik
67

92. borschik
> borschik
67

93. borschik
> borschik
-i pages/index/index.css
67

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

95. Утилиты
68

96. Утилиты
сБорщик
https://github.com/veged/borschik
68

97. Утилиты
сБорщик
https://github.com/veged/borschik
CSSO
https://github.com/afelix/csso
68

98. Утилиты
сБорщик
https://github.com/veged/borschik
CSSO
https://github.com/afelix/csso
Сеточка
https://github.com/afelix/setochka
68

99. bem server

100. bem server
70

101. bem server
> bem server
70

102. 71

103. index.css
@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);
72

104. 73

105. clck.ru/0Q9UF
74

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

107. 76

108. 77

109. 78

110. 79

111. github.com/bem/bem-haml
80

112. 81

113. search.haml
- DECL :search do |content|
%form.search
= DO content
- DECL :search__input
%input.search__input
- DECL :search__button do |content|
%button.search__button
= DO content
82

114. index.haml
- DECL :search do |content|
- DO :search__input
- DO :search__button
Найти
83

115. Превращение
index.bemdecl.js ⇉ index.css
index.ie.css
84

116. Превращение
index.bemdecl.js ⇉ index.css
index.ie.css
index.haml ⇉
84

117. Превращение
index.bemdecl.js ⇉ index.css
index.ie.css
index.haml ⇉ index.html
84

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

119. 86

120. Что плохо?
87

121. Что плохо?
Длинные CSS классы
87

122. Что плохо?
Длинные CSS классы
Много файлов
87

123. Что плохо?
Длинные CSS классы
Много файлов
Сборка и пересборка
87

124. 88

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

126. Радость
в контексте HTML/CSS
Порядок
89

127. Радость
в контексте HTML/CSS
Порядок
Независимость блоков
89

128. Радость
в контексте HTML/CSS
Порядок
Независимость блоков
Компиляция / оптимизация
89

129. Радость
в контексте HTML/CSS
Порядок
Независимость блоков
Компиляция / оптимизация
Станок (реиспользование кода)
89

130. Радость
в контексте HTML/CSS
Порядок
Независимость блоков
Компиляция / оптимизация
Станок (реиспользование кода)
Документируемость
89

131. Пишем JavaScript

132. Обычный JavaScript

133. Файловая структура проекта
css/
img/
js/
page.html
index.html
92

134. HTML-код страницы
<html>
<head>
<script src=”js/plugins/ui.js”/>
<script src=”js/page.js”/>
...
</html>
93

135. JavaScript по БЭМ!

136. 95

137. 96

138. Файловая структура блока
search/
...
search.css
search.js
97

139. 98

140. JavaScript блоков
99

141. JavaScript блоков
blocks/
search/
...
search.js
99

142. JavaScript блоков
blocks/
search/
...
search.js
visualsearch/
visualsearch.js
99

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

144. search.deps.js
({
shouldDeps: [
{ block: ‘visualsearch’ }
]
})
101

145. bem build
102

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

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

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

149. index.js
/* visualsearch.js */
...
/* search.js */
var visualSearch = VS.init({
...
});
103

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

151. 105

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

153. 106

154. Вспомогательные блоки
blocks/
backbone/
backbone.js
underscore/
underscore.js
107

155. Что плохо?
Длинные CSS классы
Много файлов
Сборка и пересборка
108

156. Что плохо?
Длинные CSS классы
Много файлов
Сборка и пересборка
Надо договариваться
108

157. 109

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

159. Радость
в контексте JavaScript
Порядок
110

160. Радость
в контексте JavaScript
Порядок
Интеграция с HTML-вёрсткой
110

161. Радость
в контексте JavaScript
Порядок
Интеграция с HTML-вёрсткой
Зависимости
110

162. Радость
в контексте JavaScript
Порядок
Интеграция с HTML-вёрсткой
Зависимости
Компиляция
110

163. Радость
в контексте JavaScript
Порядок
Интеграция с HTML-вёрсткой
Зависимости
Компиляция
Документируемость
110

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

165. 112

166. Обычно

167. 114

168. Server-side по БЭМ!

169. github.com/bem/bem-django
116

170. 117

171. 118

172. 119

173. 119

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

175. Радость
при управлении разработкой
Быстрее работают
120

176. Радость
при управлении разработкой
Быстрее работают
Больше делают
120

177. 121

178. 121

179. Итоги

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

181. Всеобщая радость
Модульность
123

182. Всеобщая радость
Модульность
Единая предметная область
123

183. Всеобщая радость
Модульность
Единая предметная область
Документируемость
123

184. Всеобщая радость
Модульность
Единая предметная область
Документируемость
Компиляция
123

185. Всеобщая радость
Модульность
Единая предметная область
Документируемость
Компиляция
Станок
123

186. 124

187. 124

188. 124

189. clck.ru/WVmV
ВАКАНСИЯ
125

190. Варвара Степанова
toivonen@yandex-team.ru
toivonens
#БЭМ
#yasubbotnik