2 июля 2011, Я.Субботник в Екатеринбурге Сергей Бережной, Виталий Харисов "БЭМ! или как разрабатывать веб-проекты" О докладе: Делимся опытом про способ разработки веб-проектов, который мы считаем самым лучшим. Когда мы думаем о «разработке проектов», мы представляем себе долго живущие и долго развивающиеся проекты, которые создаются быстро, легко поддерживаются и развиваются, в работе над которыми эффективно объединено большое количество и людей, и кода. В докладе мы расскажем про методологию Блок-Элемент-Модификатор, разделение кода на логические части, совместную работу разных специалистов и многоязычный код, пример использования и вспомогательные инструменты.

1. БЭМ!
или как разрабатывать веб-проекты
Виталий Харисов
Сергей Бережной
Я.Субботник, Екатеринбург, 2 июля 2011 года
1
суббота, 2 июля 2011 г. 1
Привет!
Мы работаем в Яндексе и разрабатываем
разные веб-сервисы. В ходе…

2. суббота, 2 июля 2011 г. 2
…эволюции наших проектов мы выработали
подход к разработке, который мы назвали
«БЭМ!».

3. БЭМ-методология
3
суббота, 2 июля 2011 г. 3
Начнём с теории.

4. Методология
учение об организации деятельности
methodolog.ru
4
суббота, 2 июля 2011 г. 4
Методология — это учение об организации
деятельности.
В основе нашей методологии лежат…

5. суббота, 2 июля 2011 г. 5
…блоки, которые…

6. суббота, 2 июля 2011 г. 6
…могут использоваться, как сами по себе, так
и…

7. суббота, 2 июля 2011 г. 7
…вместе с другими блоками.
Блоки состоят из…

8. суббота, 2 июля 2011 г. 8
…элементов.
Элементы используются для построения
блоков и вне блоков не существуют.
Элементы бывают обязательные и…

9. суббота, 2 июля 2011 г. 9
…опциональные.
Третье понятие, завершающее аббревиатуру
«БЭМ!» — модификатор.
Модификаторы могут быть у блока и элемента,
они…

10. суббота, 2 июля 2011 г. 10
…меняют внешний вид…

11. суббота, 2 июля 2011 г. 11
…или поведение.
Одновременно может использоваться
несколько модификаторов.

12. суббота, 2 июля 2011 г. 12
БЭМ-дерево.

13. суббота, 2 июля 2011 г. 13
По аналогии с DOM-деревом
БЭМ-деревом мы называем совокупность
блоков/элементов/модификаторов и данных в
них, которая используется в runtime.

14. суббота, 2 июля 2011 г. 14
Декларация — это код блоков, элементов и
модификаторов, реализованный в разных
технологиях.

15. суббота, 2 июля 2011 г. 15
Уровень переопределения — это набор
реализаций блоков. Проект может иметь
несколько уровней, на каждом из которых
добавляется или изменяется реализация
блоков.
Конечная реализация…

16. суббота, 2 июля 2011 г. 16
…собирается со всех уровней
последовательно. Получается собранный
runtime.

17. — Видео докладов
clubs.ya.ru/bem/posts.xml?tag=64664079
17
суббота, 2 июля 2011 г. 17
Более подробно мы рассказывали про БЭМ-
методологию на РИТ, рекомендуем посмотреть
видео доклада.

18. Old School и БЭМ!
18
суббота, 2 июля 2011 г. 18
Сравним классический подход к разработке
сайтов и БЭМ-подход.

19. — Создадим сайт
19
суббота, 2 июля 2011 г. 19
Создадим простенький (ради демонстрации)
сайт…

20. — Создадим сайт
— Old School
20
суббота, 2 июля 2011 г. 20
…как это делается обычно…

21. — Создадим сайт
— Old School
— БЭМ!
21
суббота, 2 июля 2011 г. 21
…и сравним с тем, как это делаем мы.

22. — Создадим сайт
— Old School
— БЭМ!
— Сделаем несколько изменений
22
суббота, 2 июля 2011 г. 22
А потом проэмулируем ситуацию внесения
изменений в существующий код.

23. — Создадим сайт
— Old School
— БЭМ!
— Сделаем несколько изменений
— Резюме ;-)
23
суббота, 2 июля 2011 г. 23
Постараемся, чтобы к концу у нас были какие-
то выводы ;-)

24. суббота, 2 июля 2011 г. 24
Вот таким будет дизайн нашего сайта. По сути
это только логотип, меню, контент и копирайт.

25. Делаем
25
суббота, 2 июля 2011 г. 25

26. Old School
26
суббота, 2 июля 2011 г. 26
Мы будем делать "олд скульно", но не "тяп-
ляп", аккуратно.

27. Old School
design/
design.psd
27
суббота, 2 июля 2011 г. 27
Положим в отдельную папку макет.

28. Old School
css/
design/
design.psd
img/
js/
28
суббота, 2 июля 2011 г. 28
Создадим верхнеуровневую структуру папок
для стилей, картинок и скриптов. Знакомо,
неправда ли? ;-)

29. Old School
css/
style.css
design/
design.psd
img/
js/
script.js
index.html
29
суббота, 2 июля 2011 г. 29
Один файл для всех стилей, один для всех
скриптов и html-файл страницы.

30. Old School
index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Index page</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script
src="//yandex.st/jquery/1.6.2/jquery.js"></script>
<script src="js/script.js"></script>
</body>
30
суббота, 2 июля 2011 г. 30
Не хитрый html5 шаблон. Мы используем
HTML5 Boilerplate от Пола Айриша, лишь
немного сократив его.

31. Old School
Шапка: html
<div id="head">
<img id="logo" src="img/logo.png" alt="Logo">
</div>
31
суббота, 2 июля 2011 г. 31
Начинаем писать html. Сначала для шапки…

32. Old School
Шапка: png
css/
style.css
design/
design.psd
img/
logo.png
js/
script.js
index.html
32
суббота, 2 июля 2011 г. 32
…и логотипа. Кладём картинку в папку для
всех картинок.

33. Old School
Шапка: js
$(function(){
$('#logo').mouseover(function() {
$(this).fadeOut().fadeIn()
});
});
33
суббота, 2 июля 2011 г. 33
В файле для всех скриптов пишем скрипт для
анимации логотипа. Сам скрипт, только для
демонстрации, что могут быть элементы
требующие реализации в js.

34. Old School
Шапка: css
/* ==== Scroll down to find where to put your
styles :) ==== */
/* HTML5 ✰ Boilerplate */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins,
kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol,
ul, li,
fieldset, form, label, legend,
34
суббота, 2 июля 2011 г. 34
Шаблон HTML5 Boilerplate встречает нас
приветствием с указанием направления.

35. Old School
Шапка: css
/*
// ==========================================
|| ||
|| Your styles ! ||
|| ||
========================================== //
*/
35
суббота, 2 июля 2011 г. 35
Находим место для наших стилей…

36. Old School
Шапка: css
#head img {
width: 153px;
height: 62px;
}
36
суббота, 2 июля 2011 г. 36
…и добавляем стили для логотипа.

37. Old School
Меню: html
<ul id="menu">
<li class="current">Index</li>
<li><a href="news.html">News</a></li>
<li><a href="about.html">About</a></li>
</ul>
37
суббота, 2 июля 2011 г. 37
Меню и первый выделенный пункт с помощью
отдельного class.

38. Old School
Меню: css
#menu li {
display: inline-block;
margin-right: 0.75em;
font-size: 1.5em;
list-style: none;
}
#menu .current {
border-bottom: 4px solid #aaa;
}
38
суббота, 2 июля 2011 г. 38
Стили для меню и выделенного пункта.

39. Old School
Контент: html
<div id="main">
<h2>Content page header</h2>
<p>Lorem ipsum dolor sit amet, consectetur …
<p>Lorem ipsum dolor sit amet, consectetur …
</div>
39
суббота, 2 июля 2011 г. 39
Простая контентная часть…

40. Old School
Контент: css
#main { margin-top: 2em; }
#main h2 { font-size: 150%; margin-bottom: 0.5em; }
#main p { margin-bottom: 1em; }
40
суббота, 2 июля 2011 г. 40
…и стили.

41. Old School
Подвал: html
<div id="foot">&copy; 2011</div>
41
суббота, 2 июля 2011 г. 41
Подвал с копирайтом…

42. Old School
Подвал: css
#foot { margin-top: 3em; padding-top: 1em; border-top:
1px solid #ddd; }
.ir { display: block; text-indent: -999em; overflow:
hidden; background-repeat: no-repeat; text-align:
left; direction: ltr; }
.hidden { display: none; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0);
height: 1px; margin: -1px; overflow: hidden; padding:
0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { clip: auto; height:
42
суббота, 2 июля 2011 г. 42
…и наши стили в общем файле. Ниже разные
вспомогательные стили из HTML5 Boilerplate.

43. Old School
Страница: css
/*
// ==========================================
|| ||
|| Your styles ! ||
|| ||
========================================== //
*/
body { width: 40em; margin: 2em auto; padding: 2em; }
43
суббота, 2 июля 2011 г. 43
Добавляем общие стили для всей страницы.

44. Old School
Всё готово!
css/
style.css
design/
design.psd
img/
logo.png
index.html
js/
script.js
44
суббота, 2 июля 2011 г. 44
Финальная файловая структура проекта и…

45. суббота, 2 июля 2011 г. 45
…работающий статический сайт.

46. БЭМ!
46
суббота, 2 июля 2011 г. 46
Рассмотрим один из способов сверстать такой
же сайт используя БЭМ-методологию и…

47. БЭМ!
Инструменты
47
суббота, 2 июля 2011 г. 47
…инструменты. Нам потребуются зависимости.

48. БЭМ!
Инструменты
— NodeJS
http://nodejs.org
48
суббота, 2 июля 2011 г. 48
Все наши инструменты реализованы на
JavaScript и используют NodeJS.

49. БЭМ!
Инструменты
— NodeJS
http://nodejs.org
— NPM
http://npmjs.org
49
суббота, 2 июля 2011 г. 49
Для удобной установки модулей можно
использовать Node Package Manager.

50. БЭМ!
Инструменты
— NodeJS
http://nodejs.org
— NPM
http://npmjs.org
— BEM Tools
> npm install bem
50
суббота, 2 июля 2011 г. 50
С помощью него устанавливаем БЭМ-
инструменты.

51. БЭМ!
Блоки и страницы
> bem create level blocks pages
51
суббота, 2 июля 2011 г. 51
С помощью команды bem создадим начальную
структуру проекта. Мы называем это уровнями
переопределения.

52. БЭМ!
Блоки и страницы
> bem create level blocks pages
blocks/
pages/
52
суббота, 2 июля 2011 г. 52
В результате имеем такие папки.

53. БЭМ!
Страницы: index
> bem create block -l pages/ -t html index
53
суббота, 2 июля 2011 г. 53
Создадим страницу. Удобно, что в терминах
БЭМ-методологии, страницы можно
рассматривать как блоки, со своими
отдельными технологиями.

54. БЭМ!
Страницы: index
> bem create block -l pages/ -t html index
blocks/
pages/
index/
index.html
54
суббота, 2 июля 2011 г. 54
И использовать одни инструменты для
создания файловой структуры.

55. БЭМ!
Страницы: index
> bem create block -l pages/ -t html index
blocks/
pages/
index/
index.html
index.psd
55
суббота, 2 июля 2011 г. 55
Рядом с html-файлом страницы сложим её psd-
макет.

56. БЭМ!
Страницы: index
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Index page</title>
<link rel="stylesheet" href="index.css">
</head>
<body class="b-page">
<script
src="//yandex.st/jquery/1.6.2/jquery.js"></script>
<script src="index.js"></script>
</body>
56
суббота, 2 июля 2011 г. 56
Базовый шаблон по сути ничем не отличается
от Old School варианта.

57. БЭМ!
Страницы: index
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Index page</title>
<link rel="stylesheet" href="index.css">
</head>
<body class="b-page">
<script
src="//yandex.st/jquery/1.6.2/jquery.js"></script>
<script src="index.js"></script>
</body>
57
суббота, 2 июля 2011 г. 57
Кроме первого блока, отвечающего за всю
страницу целиком.

58. БЭМ!
b-page
> bem create block -l blocks/ -t css b-page
58
суббота, 2 июля 2011 г. 58
Продолжаем использовать команду bem для
создания…

59. БЭМ!
b-page
> bem create block -l blocks/ -t css b-page
blocks/
b-page/
b-page.css
59
суббота, 2 июля 2011 г. 59
…файловой структуры.

60. БЭМ!
b-page
.b-page
{
font: Arial, sans-serif;
width: 40em;
margin: 2em auto;
padding: 2em;
color: #444;
background: #fff;
}
60
суббота, 2 июля 2011 г. 60
Технология css блока b-page описывает
базовые стили страницы.

61. БЭМ!
b-head
61
суббота, 2 июля 2011 г. 61

62. БЭМ!
b-head
<div class="b-head">
<img
class="b-head__logo"
src="/blocks/b-head/__logo/b-head__logo.png"
alt="Logo">
</div>
62
суббота, 2 июля 2011 г. 62
Разметка для шапки с логотипом.

63. БЭМ!
b-head
> bem create block -l blocks/ b-head
63
суббота, 2 июля 2011 г. 63
И создание последовательно сначала самого
блока, …

64. БЭМ!
b-head
> bem create block -l blocks/ b-head
> bem create elem
-l blocks/ -b b-head logo -t css -t js
64
суббота, 2 июля 2011 г. 64
…потом его элемента.

65. БЭМ!
b-head
> bem create block -l blocks/ b-head
> bem create elem
-l blocks/ -b b-head logo -t css -t js
blocks/
b-head/
__logo/
b-head__logo.css
b-head__logo.js
65
суббота, 2 июля 2011 г. 65
Сгенерированная файловая структура…

66. БЭМ!
b-head
> bem create block -l blocks/ b-head
> bem create elem
-l blocks/ -b b-head logo -t css -t js
blocks/
b-head/
__logo/
b-head__logo.css
b-head__logo.js
b-head__logo.png
66
суббота, 2 июля 2011 г. 66
…в которую мы добавляем файл с картинкой
логотипа.

67. БЭМ!
b-head
blocks/
b-head/
__logo/
b-head__logo.css
.b-head__logo
{
width: 122px;
height: 49px;
}
67
суббота, 2 июля 2011 г. 67
Пишем стили и…

68. БЭМ!
b-head
blocks/
b-head/
__logo/
b-head__logo.js
$('.b-head__logo').live(
'mouseover',
function() { $(this).fadeOut().fadeIn() });
68
суббота, 2 июля 2011 г. 68
…скрипты.

69. БЭМ!
b-menu
69
суббота, 2 июля 2011 г. 69

70. БЭМ!
b-menu
<ul class="b-menu">
<li class="b-menu__item
b-menu__item_state_current">
Index
</li>
<li class="b-menu__item">
<a href="news.html">News</a>
</li>
<li class="b-menu__item">
<a href="about.html">About</a>
</li>
</ul>
70
суббота, 2 июля 2011 г. 70
В разметке для блока меню (b-menu)…

71. БЭМ!
b-menu
<ul class="b-menu">
<li class="b-menu__item
b-menu__item_state_current">
Index
</li>
<li class="b-menu__item">
<a href="news.html">News</a>
</li>
<li class="b-menu__item">
<a href="about.html">About</a>
</li>
</ul>
71
суббота, 2 июля 2011 г. 71
…используем классы для элементов блока (b-
menu__item),…

72. БЭМ!
b-menu
<ul class="b-menu">
<li class="b-menu__item
b-menu__item_state_current">
Index
</li>
<li class="b-menu__item">
<a href="news.html">News</a>
</li>
<li class="b-menu__item">
<a href="about.html">About</a>
</li>
</ul>
72
суббота, 2 июля 2011 г. 72
…а состояние текущего пункта реализуем с
помощью модификатора (b-
menu__item_state_current).

73. БЭМ!
b-menu
> bem create block -l blocks/ b-menu -t css
73
суббота, 2 июля 2011 г. 73
Создадим блок b-menu с технологией css.

74. БЭМ!
b-menu
> bem create block -l blocks/ b-menu -t css
blocks/
b-menu/
b-menu.css
74
суббота, 2 июля 2011 г. 74

75. БЭМ!
b-menu
.b-menu
{
font-size: 1.5em;
margin: 1em 0;
padding: 0;
white-space: nowrap;
}
75
суббота, 2 июля 2011 г. 75
В одном файле опишем стили для самого
меню…

76. БЭМ!
b-menu
.b-menu__item
{
display: inline-block;
margin-right: 0.75em;
list-style: none;
}
76
суббота, 2 июля 2011 г. 76
…и для его элементов.

77. БЭМ!
b-menu
.b-menu__item_state_current
{
border-bottom: 4px solid #aaa;
}
77
суббота, 2 июля 2011 г. 77
Мы специально делаем по другому, чем с
логотипом, чтобы показать возможность делать
по разному.

78. БЭМ!
b-main
78
суббота, 2 июля 2011 г. 78
Повторяем аналогично для основного
контента…

79. БЭМ!
b-main
<div class="b-main">
<h2>Content page header</h2>
<p>Lorem ipsum dolor sit amet, consectetur …
<p>Lorem ipsum dolor sit amet, consectetur …
</div>
79
суббота, 2 июля 2011 г. 79

80. БЭМ!
b-main
> bem create block -l blocks/ b-main -t css
80
суббота, 2 июля 2011 г. 80

81. БЭМ!
b-main
> bem create block -l blocks/ b-main -t css
blocks/
b-main/
b-main.css
81
суббота, 2 июля 2011 г. 81

82. БЭМ!
b-main
.b-main
{
margin-top: 2em;
}
82
суббота, 2 июля 2011 г. 82

83. БЭМ!
b-main
.b-main h2
{
font-size: 150%;
margin-bottom: 0.5em;
}
83
суббота, 2 июля 2011 г. 83

84. БЭМ!
b-main
.b-main p
{
margin: 0 0 1em;
}
84
суббота, 2 июля 2011 г. 84

85. БЭМ!
b-foot
85
суббота, 2 июля 2011 г. 85
…и для подвала с копирайтом.

86. БЭМ!
b-foot
<div class="b-foot">&copy; 2011</div>
86
суббота, 2 июля 2011 г. 86

87. БЭМ!
b-foot
.b-foot
{
margin-top: 3em;
padding-top: 1em;
border-top: 1px solid #ddd;
}
87
суббота, 2 июля 2011 г. 87

88. БЭМ!
Сборка
88
суббота, 2 июля 2011 г. 88
В Old School версии код пишется максимально
близким к продакшен версии для браузера.
Используя БЭМ мы разделяем то что пишет
человек, от оптимизированной для браузера
версии, с помощью этапа сборки.

89. БЭМ!
Декларация
89
суббота, 2 июля 2011 г. 89
Сборка основывается на так называемой
декларации использования.

90. БЭМ!
Декларация
> bem create block -l pages/ -t bemdecl.js index
90
суббота, 2 июля 2011 г. 90
Это специальная технология…

91. БЭМ!
Декларация
> bem create block -l pages/ -t bemdecl.js index
pages/
index/
index.bemdecl.js
index.html
91
суббота, 2 июля 2011 г. 91

92. БЭМ!
Декларация
exports.blocks = [
{ name: 'b-page' },
{ name: 'b-head', elems: [{ name: 'logo' }] },
{ name: 'b-menu',
mods: [{ name: 'size', vals: ['small'] }],
elems: [ { name: 'item',
mods: [{ name: 'state', vals: ['current'] }]}]},
{ name: 'b-main' },
{ name: 'b-foot' },
]
92
суббота, 2 июля 2011 г. 92
…описывающая набор блоков, элементов и
модификаторов, которые мы хотим
использовать в одном рантайме.

93. БЭМ!
Сборка
> cd pages/index
> bem build
-d index.bemdecl.js
-n index
-l ../../blocks/
-t css -t js
93
суббота, 2 июля 2011 г. 93
Имея файл декларации мы можем собрать
рантайм для двух технологий (css и js) из
одного уровня переопределения (blocks/).

94. БЭМ!
Всё готово!
pages/
index/
index.bemdecl.js
index.css
index.html
index.js
index.psd
94
суббота, 2 июля 2011 г. 94
В результате получатся те самые файлы, на
которые мы ссылались в index.html.

95. БЭМ!
Сборка
> vim GNUmakefile
all: $(wildcard pages/*/*.bemdecl.js)
BEM_BUILD=bem build
-d $1/$2.bemdecl.js -o $1 -n $2
-l blocks/ -t css -t js
%.bemdecl.js: FORCE
$(call BEM_BUILD,$(@D),$(*F))
95
суббота, 2 июля 2011 г. 95
Несложный Makefile поможет нам простым
образом запускать сборку для всех файлов
деклараций на уровне pages/.

96. суббота, 2 июля 2011 г. 96
Статический сайт готов.

97. Меняем
97
суббота, 2 июля 2011 г. 97
Представим, что через некоторое время,
потребовалось внести несколько изменений в
сайт.

98. Меняем
— Уменьшить логотип
98
суббота, 2 июля 2011 г. 98

99. Меняем
— Уменьшить логотип
— Добавить меню вниз
99
суббота, 2 июля 2011 г. 99

100. Меняем
— Уменьшить логотип
— Добавить меню вниз
— Добавить промо-страницу
100
суббота, 2 июля 2011 г. 100

101. Old School
Уменьшить логотип
101
суббота, 2 июля 2011 г. 101

102. Old School
Уменьшить логотип
css/
style.css
design/
design.psd
img/
logo.png
js/
script.js
index.html
102
суббота, 2 июля 2011 г. 102
Находим файл с картинкой для логотипа и
уменьшаем её.

103. Old School
Уменьшить логотип
css/
style.css
design/
design.psd
img/
logo.png
js/
script.js
index.html
103
суббота, 2 июля 2011 г. 103
В общем файле для всех стилей…

104. Old School
Уменьшить логотип
/* ==== Scroll down to find where to put your
styles :) ==== */
/* HTML5 ✰ Boilerplate */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins,
kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol,
ul, li,
fieldset, form, label, legend,
104
суббота, 2 июля 2011 г. 104
…пытаемся найти что-то про #logo…

105. Old School
Уменьшить логотип
#logo {
width: 122px;
height: 49px;
}
105
суббота, 2 июля 2011 г. 105
…не найдя, добавляем нужные стили.

106. Old School
Уменьшить логотип
#head img {
width: 153px;
height: 62px;
}
106
суббота, 2 июля 2011 г. 106
Хотя стили для логотипа были, но были
сформулированны используя другие
селекторы.
Пример, конечно, очень тривиальный, но,
хочется верить, его суть понятна ;-)

107. БЭМ!
Уменьшить логотип
107
суббота, 2 июля 2011 г. 107
В файловой структуре БЭМ-проекта…

108. БЭМ!
Уменьшить логотип
blocks/
b-head/
__logo/
b-head__logo.css
b-head__logo.js
b-head__logo.png
108
суббота, 2 июля 2011 г. 108
…файлы всех технологий, отвечающих за
логотип, находятся в более заметном месте.

109. БЭМ!
Уменьшить логотип
.b-head__logo
{
width: 122px;
height: 49px;
}
109
суббота, 2 июля 2011 г. 109
Меняем их.

110. Old School
Добавить меню вниз
110
суббота, 2 июля 2011 г. 110
Следующее изменение — продублировать
меню внизу страницы, уменьшив его размер
шрифта.

111. Old School
Добавить меню вниз
<ul id="menu">
…
</ul>
111
суббота, 2 июля 2011 г. 111
Имеющееся меню сделано с помощью id…

112. Old School
Добавить меню вниз
<ul id="menuBottom">
…
</ul>
112
суббота, 2 июля 2011 г. 112
…поэтому дублируем его внизу с новым id.

113. Old School
Добавить меню вниз
#menu,
#menuBottom {
font-size: 1.5em;
white-space: nowrap;
margin: 1em 0;
}
#menuBottom {
font-size: 1em;
}
113
суббота, 2 июля 2011 г. 113
Добавляем этот id в CSS.

114. Old School
Добавить меню вниз
#menu li,
#menuBottom li {
display: inline-block;
margin-right: 0.75em;
list-style: none;
}
#menuBottom li {
margin-right: 0.5em;
font-size: 1em;
}
114
суббота, 2 июля 2011 г. 114

115. Old School
Добавить меню вниз
#menu .current,
#menuBottom .current {
border-bottom: 4px solid #aaa;
}
115
суббота, 2 июля 2011 г. 115

116. БЭМ!
Добавить меню вниз
116
суббота, 2 июля 2011 г. 116
Сделаем тоже самое на БЭМ.

117. БЭМ!
Добавить меню вниз
<ul class="b-menu b-menu_size_small">
…
</ul>
117
суббота, 2 июля 2011 г. 117
Изменение размера шрифта делаем с помощью
добавления модификатора к имеющемуся
блоку…

118. БЭМ!
Добавить меню вниз
> bem create mod -l blocks/ -b b-menu
size -v small -t css
118
суббота, 2 июля 2011 г. 118
…используя утилиту bem.

119. БЭМ!
Добавить меню вниз
> bem create mod -l blocks/ -b b-menu
size -v small -t css
blocks/
b-menu/
_size/
b-menu_size_small.css
119
суббота, 2 июля 2011 г. 119
В созданный файл…

120. БЭМ!
Добавить меню вниз
.b-menu_size_small
{
font-size: 1em;
}
.b-menu_size_small .b-menu__item
{
margin-right: 0.5em;
}
120
суббота, 2 июля 2011 г. 120
…добавляем стили для модификатора.

121. Old School
Добавить промо-страницу
121
суббота, 2 июля 2011 г. 121
Следующее изменение — добавить промо-
страницу, на которой есть шапка, подвал и
большой тяжёлый промо-блок.

122. Old School
Добавить промо-страницу
css/
style.css
design/
design.psd
img/
logo.png
index.html
promo.html
js/
script.js
122
суббота, 2 июля 2011 г. 122
Копируем index.html под именем promo.html и
…

123. Old School
Добавить промо-страницу
…
<body>
<div id="head">
<img id="logo" src="img/logo.png" alt="Logo">
</div>
<div id="promo">PROMO</div>
<div id="foot">&copy; 2011</div>
<script …
123
суббота, 2 июля 2011 г. 123
…пишем HTML-код.

124. Old School
Добавить промо-страницу
css/
style.css
design/
design.psd
img/
logo.png
index.html
promo.html
js/
script.js
124
суббота, 2 июля 2011 г. 124
В файл со скриптами…

125. Old School
Добавить промо-страницу
$(function(){
$('#logo').mouseover(function() {
$(this).fadeOut().fadeIn()
});
$('#promo') /* HUGE PROMO JS */
});
125
суббота, 2 июля 2011 г. 125
…добавляем много js промо-кода.

126. Old School
Добавить промо-страницу
css/
style.css
design/
design.psd
img/
logo.png
index.html
promo.html
js/
script.js
126
суббота, 2 июля 2011 г. 126
В файл со стилями…

127. Old School
Добавить промо-страницу
#promo {
text-align: center;
margin: 1em 0;
padding: 10em;
background: #eee;
/*
// ==========================================
|| ||
|| Your PROMO styles ! ||
|| ||
========================================== //
*/
127
суббота, 2 июля 2011 г. 127
…добавляем много стилей.

128. БЭМ!
Добавить промо-страницу
128
суббота, 2 июля 2011 г. 128
И снова делаем это на БЭМ.

129. БЭМ!
Добавить промо-страницу
> bem create block -l pages/
-t html -t bemdecl.js
promo
129
суббота, 2 июля 2011 г. 129
Добавляем новую страницу…

130. БЭМ!
Добавить промо-страницу
> bem create block -l pages/
-t html -t bemdecl.js
promo
pages/
index/
…
promo/
promo.bemdecl.js
promo.html
130
суббота, 2 июля 2011 г. 130

131. БЭМ!
Добавить промо-страницу
promo.bemdecl.js
exports.blocks = [
{ name: 'b-page' },
{ name: 'b-head',
elems: [{ name: 'logo' }] },
{ name: 'b-promo' },
{ name: 'b-foot' },
]
131
суббота, 2 июля 2011 г. 131
Декларируем блоки, которые есть на этой
странице.

132. БЭМ!
Добавить промо-страницу
<link rel="stylesheet" href="promo.css">
…
<body class="b-page">
<div class="b-head"> … </div>
<div class="b-promo">PROMO</div>
<div class="b-foot"> …
<script src="promo.js"></script>
…
132
суббота, 2 июля 2011 г. 132
Пишем HTML-код.

133. БЭМ!
Добавить промо-страницу
> bem create block -l blocks/ -t css -t js b-promo
133
суббота, 2 июля 2011 г. 133
Создаём промо-блок.

134. БЭМ!
Добавить промо-страницу
> bem create block -l blocks/ -t css -t js b-promo
blocks/
b-promo/
b-promo.css
b-promo.js
134
суббота, 2 июля 2011 г. 134

135. БЭМ!
Добавить промо-страницу
.b-promo
{
text-align: center;
margin: 1em 0;
padding: 10em;
background: #eee;
/*
// ==========================================
|| ||
|| Your PROMO styles ! ||
|| ||
========================================== //
135
суббота, 2 июля 2011 г. 135
Добавляем стили в соответствующий файл.

136. БЭМ!
Добавить промо-страницу
$('#promo') /* HUGE PROMO JS */
136
суббота, 2 июля 2011 г. 136
И скрипты тоже.

137. БЭМ!
Добавить промо-страницу
Варианты загрузки css и js для страниц
137
суббота, 2 июля 2011 г. 137
Есть несколько вариантов подключения стилей
и скриптов на страницы.

138. БЭМ!
Варианты загрузки css и js
— Каждая страница имеет свои css/js
138
суббота, 2 июля 2011 г. 138
На каждой странице могут загружаться стили и
скрипты только для неё, как мы это делали
выше в БЭМ-методе.

139. БЭМ!
Варианты загрузки css и js
— Каждая страница имеет свои css/js
— Все страницы имеют один общий css/js
139
суббота, 2 июля 2011 г. 139
Второй вариант — собрать стили и скрипты
всех страниц в один файл, как мы это делали
выше в Old School методе.

140. БЭМ!
Варианты загрузки css и js
— Каждая страница имеет свои css/js
— Все страницы имеют один общий css/js
— Общее для всех страниц отдельно
+ своё для каждой страницы
140
суббота, 2 июля 2011 г. 140
Третий вариант — общее для всех страниц
вынести в отдельный файл и для каждой
страницы добавлять только то, что
используется на ней.

141. БЭМ!
Варианты загрузки css и js
> bem create block -l pages/ all
141
суббота, 2 июля 2011 г. 141
Мы использовали до этого в БЭМ-методе
вариант стилей/скриптов для каждой
странице. Сделаем из этого варианта сначала
общий файл со всеми стилями/скриптами.
Создадим ещё одну страницу с именем all и …

142. БЭМ!
Варианты загрузки css и js
> bem create block -l pages/ all
> bem decl merge
-d pages/index/index.bemdecl.js
-d pages/promo/promo.bemdecl.js
-o pages/all/all.bemdecl.js
142
суббота, 2 июля 2011 г. 142
…объединим декларации блоков всех страниц,
сложив результат в страницу all.

143. БЭМ!
Варианты загрузки css и js
> bem create block -l pages/ common
143
суббота, 2 июля 2011 г. 143
А теперь реализуем вариант с общим файлом и
специфичными файлами для каждой страницы.
Создадим страницу common.

144. БЭМ!
Варианты загрузки css и js
> bem decl subtract
-d pages/index/index.bemdecl.js
-d pages/promo/promo.bemdecl.js
-o pages/index/index-only.bemdecl.js
144
суббота, 2 июля 2011 г. 144
Вычтем из декларации index страницы
декларацию promo страницы. Получим index-
only декларацию.

145. БЭМ!
Варианты загрузки css и js
> bem decl subtract
-d pages/promo/promo.bemdecl.js
-d pages/index/index.bemdecl.js
-o pages/promo/promo-only.bemdecl.js
145
суббота, 2 июля 2011 г. 145
Вычтем из декларации promo страницы
декларацию index страницы. Получим promo-
only декларацию.

146. БЭМ!
Варианты загрузки css и js
> bem decl subtract
-d pages/all/all.bemdecl.js
-d pages/index/index-only.bemdecl.js
-d pages/promo/promo-only.bemdecl.js
-o pages/common/common.bemdecl.js
146
суббота, 2 июля 2011 г. 146
А теперь из общей декларации вычтем каждую
частную декларацию. Получим common
декларацию, в которой только общее для всех
страниц.

147. БЭМ!
Варианты загрузки css и js
<link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="promo-only.css">
…
<script src="common.js"></script>
<script src="promo-only.js"></script>
…
147
суббота, 2 июля 2011 г. 147
Код подключения на странице.

148. Получаем
148
суббота, 2 июля 2011 г. 148
Подведём итог, что мы получаем при
использовании БЭМ-подхода.

149. 149
суббота, 2 июля 2011 г. 149
Мы пишем многоязычный код и делаем всей…

150. 150
суббота, 2 июля 2011 г. 150
…командой общее дело, общаясь в единых
терминах.
Код со временем не превращается…

151. суббота, 2 июля 2011 г. 151
…в комок запутанной лапши,…

152. 152
суббота, 2 июля 2011 г. 152
…роботы помогают его поддерживать и
развивать и со временем код становится…

153. суббота, 2 июля 2011 г. 153
…только лучше.

154. Ссылки
154
суббота, 2 июля 2011 г. 154

155. — Эта презентация с примерами кода
github.com/bem/yasubbotnik-ekb
155
суббота, 2 июля 2011 г. 155

156. — Эта презентация с примерами кода
github.com/bem/yasubbotnik-ekb
— БЭМ-методология
github.com/bem/bem-method
156
суббота, 2 июля 2011 г. 156

157. — Эта презентация с примерами кода
github.com/bem/yasubbotnik-ekb
— БЭМ-методология
github.com/bem/bem-method
— Инструменты
github.com/bem/bem-tools
157
суббота, 2 июля 2011 г. 157

158. — Эта презентация с примерами кода
github.com/bem/yasubbotnik-ekb
— БЭМ-методология
github.com/bem/bem-method
— Инструменты
github.com/bem/bem-tools
— Клуб для обсуждения
clubs.ya.ru/bem
158
суббота, 2 июля 2011 г. 158

159. — Эта презентация с примерами кода
github.com/bem/yasubbotnik-ekb
— БЭМ-методология
github.com/bem/bem-method
— Инструменты
github.com/bem/bem-tools
— Клуб для обсуждения
clubs.ya.ru/bem
— Хештеги: #бэм, #bem
159
суббота, 2 июля 2011 г. 159

160. Виталий Харисов
руководитель службы HTML-вёрстки
vitaly@yandex-team.ru
Сергей Бережной
руководитель группы разработки
поисковых интерфейсов
veged@yandex-team.ru
160
суббота, 2 июля 2011 г. 160

161. Bonus
161
суббота, 2 июля 2011 г. 161

162. Nano БЭМ! HTML
<ul class="b-menu b-menu_size_small">
<li class="b-menu__item
b-menu__item_state_current">
Index
</li>
<li class="b-menu__item">
<a href="news.html">News</a>
</li>
<li class="b-menu__item">
<a href="about.html">About</a>
</li>
</ul>
162
суббота, 2 июля 2011 г. 162
Один из вариантов того, как для html-
шаблонов уменьшить количество разметки:…

163. Nano БЭМ! HTML
nanoBEMHTML = (html) -> html.replace(
/(<s*[wd]+s*)(w-[wd]+)((?:s*_[wd]+?_[wd]+)*)/g,
(_, t, i, m) -> t + 'class="' + i +
(m.replace /s+/g, (s) -> s + i) + '"')
163
суббота, 2 июля 2011 г. 163
…nano BEM HTML (код на CofeeScript,
coffeescript.org). Этот короткий сниппет
позволяет писать разметку…

164. Nano БЭМ! HTML
<ul b-menu _size_small>
<li b-menu__item _state_current>Index</li>
<li b-menu__item><a href="news.html">News</a></li>
<li b-menu__item><a href="about.html">About</a></li>
</ul>
164
суббота, 2 июля 2011 г. 164
…в таком виде.