Мало кто знает, но Яндекс – это не только Поиск. Уже больше десяти лет мы делаем разные веб-сервисы, такие как Почта, Карты и другие специализированные поиски. Со временем большое количество разных примеров из реальной практики привело нас к тому, что сейчас называется БЭМ-методологией. Доклад о том, на каком этапе развития находится проект сейчас и в какую сторону мы движемся, что такое БЭМ-коммьюнити и как стать его частью.

1. БЭМ:
от методологии
до платформы
Виталий Харисов
Руководитель отдела
инфраструктуры разработки интерфейсов
Я.Субботник, Рига, 6 апреля 2013 года
Привет!
Меня зовут Виталий Харисов, я работаю в Яндексе и занимаюсь созданием внутренней
платформы для разработки интерфейсов.
Её open source часть называется БЭМ (от слов Блок-Элемент-Модификатор).

2. Обо мне
vitaly@yandex-team.ru
@harisov
— из Симферополя
— отвечаю за разработку платформы БЭМ
— пришёл в Яндекс в 2005 году как HTML-верстальщик
— прошёл путь от вёрстки независимыми блоками до
— разработки БЭМ-платформы
2
Это наш подход к разработке сайтов, который развивался в Яндексе в течение
нескольких лет.
Думаю, что он будет полезен вам, как web-разработчикам.
Прежде чем мы начнём, скажите, кто-то из вас знает, что такое БЭМ? Поднимите руки,
пожалуйста.

3. Процесс разработки
3
Давайте рассмотрим процесс разработки сайта, как это происходит обычно.

4. Процесс разработки
Дизайн
4
В начале создаётся дизайн сайта.

5. Процесс разработки
Дизайн
PSD
5
После того, как макет создан дизайнером и утверждён заказчиком…

6. Процесс разработки
Дизайн Статика
PSD
6
…он передаётся на вёрстку.

7. Процесс разработки
Дизайн Статика
PSD HTML
CSS
7
Верстальщик делает вёрстку в HTML/CSS, добивается кроссбраузерности.

8. Процесс разработки
Дизайн Статика Динамика
PSD HTML
CSS
8
После чего свёрстанный HTML передаётся программисту для создания сайта.

9. Процесс разработки
Дизайн Статика Динамика
HTML JS
PSD
CSS
9
Он оживляется с помощью JavaScript'а…

10. Процесс разработки
Дизайн Статика Динамика
HTML JS
PSD
CSS PHP
10
…и разрезается на шаблоны. Например, PHP. Это может быть любой другой шабонизатор
на ваш вкус.

11. Процесс разработки
Дизайн Статика Динамика
HTML JS
PSD
CSS PHP
Проблема
11
При таком процессе разработки возникает проблема.

12. Процесс разработки
Дизайн Статика Динамика
HTML JS
PSD
CSS PHP
Проблема
12
И она состоит не в том, что используется PHP, нет. :)

13. Процесс разработки
Дизайн Статика Динамика
HTML JS
PSD
CSS PHP
Рвётся связь
13
Проблема заключается в том, что программист, делая шаблоны, не расширяет то, что уже
сделал верстальщик, а фактически делает работу заново, перенося результат работы
верстальщика в свой код.
Он по другому разделяет на функциональные части.
То же самое часто происходит при добавлении JavaScript, когда для скрипта использются
отдельные классы.

14. Процесс разработки
Дизайн Статика Динамика
HTML JS
PSD
CSS PHP
Разные термины
14
Термины, которые использует программист, отличаются от тех, что используются в
вёрстке.

15. Процесс разработки
Дизайн Статика Динамика
HTML JS
PSD
CSS PHP
15
Аналогично проблема в том, что верстальщик не продолжает работать с тем, что сделал
дизайнер, развивая и обогащая его работу.

16. Процесс разработки
Дизайн Статика Динамика
HTML JS
PSD
CSS PHP
Рвётся связь
16
Верстальщик разбирает на части то, что сделал дизайнер и, фактически, строит свою
башню заново.

17. Процесс разработки
Дизайн Статика Динамика
HTML JS
PSD
CSS PHP
Разные термины
17
Дизайнер называет части макета по своему, верстальщик — по своему.
Они говорят на разных языках, описывая один и тот же интерфейс разными терминами.

18. Процесс разработки
Дизайн Статика Динамика
HTML JS
PSD
CSS PHP
tags
18
Например, метки у дизайнера могут называться tags, …

19. Процесс разработки
Дизайн Статика Динамика
HTML JS
PSD
CSS PHP
tags marks
19
…у верстальщика marks, …

20. Процесс разработки
Дизайн Статика Динамика
HTML JS
PSD
CSS PHP
tags marks labels
20
а у программиста labels.

21. 21
Вавилон.

22. Процесс разработки
Дизайн Статика Динамика
HTML JS
PSD
CSS PHP
Сделал — забыл
22
Это не доставляет неудобств, если проект делается один раз в режиме сделал-забыл.

23. Процесс разработки
Дизайн Статика Динамика
HTML JS
PSD
CSS PHP
Изменения
23
Но если проект живёт и развивается, если в него вносятся постоянные изменения, то эта
рассинхронизация между разными специалистами…

24. Процесс разработки
Дизайн Статика Динамика
HTML JS
PSD
CSS PHP
Замедление работы
24
…начинает замедлять работу.

25. Процесс разработки БЭМ
25
Сталкиваясь с такими проблемами в своей работе, мы придумали другой процесс
разработки, который…

26. Процесс разработки БЭМ
• повторное использование
26
…позволяет повторно использовать работу разных специалистов…

27. Процесс разработки БЭМ
• повторное использование
• единые термины
27
…и говорить им на одном языке.
В чём он заключается?

28. Процесс разработки БЭМ
Дизайн
28
Дизайнер, когда проектирует интерфейс, понимает, из каких частей он состоит и как эти
части называются.

29. Процесс разработки БЭМ
Дизайн
Статика
29
При передаче макета верстальщику передаётся не только картинка, но и то, как
называются те или иные части интерфейса по мнению дизайнера.

30. Процесс разработки БЭМ
Дизайн
Статика
30 Договариваются
Верстальщик берёт систему именования дизайнера или они договариваются об
изменении терминов, чтобы полноценно описать интерфейс, который получается после
вёрстки.

31. Процесс разработки БЭМ
Дизайн
Статика
Динамика
31
При добавлении JavaScript и нарезки в шаблоны используется уже созданная система
именования и реализации, а не выдумывается своя.

32. Процесс разработки БЭМ
Дизайн
Статика
Динамика
32 Договариваются
Если что-то надо изменить — участники процесса договариваются между собой.

33. Процесс разработки БЭМ
Статика
Дизайн
Динамика
33
При таком процессе все участники процесса вкладываются в одно дело, постепенно
развивая и улучшая проект.

34. Процесс разработки БЭМ
Статика
Дизайн
Динамика Документация
34
Такой процесс позволяет добавлять специалистов другой специализации, например,
документаторов для работы над общим кодом.

35. Процесс разработки БЭМ
Статика
Статика
Дизайн
Динамика Документация
35 Динамика
И такой процесс позволяет добавлять специалистов в тех случаях, когда нужно где-то
усилить команду.

36. БЭМ-методология
36
Давайте разберём, что такое БЭМ-методология.

37. БЭМ-методология
Блок
37
В основе методологии лежит «Блок».

38. БЭМ-методология
Блок
button
input
Визуальный
38
Причём, это может быть как визуальный блок, прямоугольник на экране.

39. БЭМ-методология
Блок
request
response
Визуальный Не визуальный
39
Так и любая вспомогательная функциональность проекта, не имеющая визуального
представления.
Например, как блоки может быть оформлено ajax-взаимодействие.

40. БЭМ-методология
Элементы
40
Блок может состоять из элементов, которые являются его составными частями и вне блока
смысла не имеют.

41. БЭМ-методология
Элементы
Визуальные Не визуальные
41
Элементы тоже могут быть как визуальные, так и вспомогательные, без внешнего вида.

42. БЭМ-методология
Модификаторы Блока
_style_dashed
42
Модификатор изменяет внешний вид блока или …

43. БЭМ-методология
Модификаторы Блока
_type_ajax
43
…его поведение. Модификатор может быть не визуальным.

44. БЭМ-методология
Модификаторы Блока
_style_dashed
_theme_green
44
Может быть несколько модификаторов одновременно.

45. БЭМ-методология
Модификаторы Блока
_style_dashed
_theme_red _theme_green
45
Модификатор может принимать разные значения.

46. БЭМ-методология
Модификаторы Блока
_style_dashed
_theme_red _theme_green
_hovered_yes _hovered_yes
46
Они могут добавляться…

47. БЭМ-методология
Модификаторы Блока
_style_dashed
_theme_red _theme_green
47
…и убираться динамически.

48. БЭМ-методология
Модификаторы Элементов
_style_dashed _theme_green
_style_dotted
_theme_red
48
Модификаторы могут быть у элементов.

49. БЭМ-методология
.html
Tech Технологии
49
Теперь поговорим о технологиях, из которых реализуется блок.
Каждый блок реализуется в одной или нескольких технологиях.

50. БЭМ-методология
.html
.css Технологии
Tech
50
Причём, вы можете сначала сделать вёрстку для блока.

51. БЭМ-методология
.html
.css Технологии
.js
Tech
51
Потом добавить к нему JavaScript-реализацию, …

52. БЭМ-методология
.bemhtml
.css Технологии
.js
Tech
52
…шаблоны, …

53. БЭМ-методология
.bemhtml
.css Технологии
.js
.ru.md
Tech
53
…и документацию.
В каждой из технологий блок имеет своё отражение.

54. БЭМ-методология
.bemhtml
.css Реализация
.js блока
.ru.md
Tech
54
И все технологии вместе образуют реализацию этого блока.

55. БЭМ-методология
.bemhtml
.css Реализация
.js блока
.ru.md
Tech Блок
первичен
55
В БЭМ подходе к реализации сайтов блок выходит на передний план, …

56. БЭМ-методология
.bemhtml
.css Реализация
Технологии блока
.js
вторичны
.ru.md
Tech Блок
первичен
56
…а технологии, реализующие его — вторичны.

57. БЭМ-методология
Уровни переопределения
57
Рассмотрим ещё одно ключевое понятие в БЭМ-методологии — уровни
переопределения.

58. БЭМ-методология
Уровни переопределения
Блок А1 Блок А2
Блок А3 Блок А4
Проект А
58
Проект делается из блоков.

59. БЭМ-методология
Уровни переопределения
Блок А1 Блок А2 Блок Б1 Блок Б2
Блок А3 Блок А4 Блок Б3 Блок Б4
Проект А Проект Б
59
Разные проекты…

60. БЭМ-методология
Уровни переопределения
Блок А1 Блок А2 Блок Б1 Блок Б2
Блок А3 Блок А4 Блок Б3 Блок Б4
Проект А Проект Б
60
…могут содержать общие блоки и в этом случае можно выделить…

61. БЭМ-методология
Уровни переопределения
Блок А1 Блок А2
Блок 1
Блок А4
Блок 2
Блок Б1
Библиотека
Блок Б3 Блок Б4
блоков
61
…общую библиотеку, куда поместить эти блоки.

62. БЭМ-методология
Уровни переопределения
Блок А1 Блок А2
Блок 1
Блок 1 Блок А4
Блок 2
Блок Б1 Блок 1
Библиотека
Блок Б3 Блок Б4
блоков
62
И потом использовать этот общий блок из библиотеки блоков.

63. БЭМ-методология
Уровни переопределения
Блок А1 Блок А2
Блок 1
Блок 1 Блок А4
Блок 2
Блок Б1 Блок 1
Библиотека
Блок Б3 Блок Б4
блоков
63
При этом на проекте можно доопределять этот блок до нужного вида или поведения.

64. БЭМ-методология
Уровни переопределения
Уровень
проекта А
Уровень
библиотеки
Уровень
проекта Б
64
Место, где лежит реализация блока, мы называем уровнем переопределения.
Причём таких уровней как на проекте, так в библиотеке может быть много.

65. БЭМ-методология
Уровни переопределения
desktop
desktop
desktop
65
Например, у нас есть только десктопная реализация сайта.

66. БЭМ-методология
Уровни переопределения
desktop
touch
desktop
touch
desktop
66
И в какой-то момент мы начинаем делать реализацию сайта для тач-устройств.

67. БЭМ-методология
Уровни переопределения
desktop
touch common
desktop
touch
desktop
67
И понимаем, что у нас есть общие блоки между десктопной и тачевой реализациями
библиотеки.
Выносим их на common уровень.

68. БЭМ-методология
Уровни переопределения
common
desktop common
touch
desktop
touch
desktop
68
Между десктопной и тачевой версией сайта тоже есть общие блоки, они переходят на
общий уровень проекта.

69. БЭМ-методология
Уровни переопределения
common
desktop common
touch
desktop
touch
desktop
69
И теперь реализации блоков для десктопного сайта располагаются на уровнях common и
desktop библиотеки…

70. БЭМ-методология
Уровни переопределения
common
desktop common
touch
desktop
touch
desktop
70
…и common и desktop проекта.

71. БЭМ-методология
Уровни переопределения
3 common
4 desktop 1 common
touch
2 desktop
touch
desktop
71
При этом финальная реализация блока собирается с разных уровней в указанном
порядке.
Каждый последующий уровень или доопределяет блоки с предыдущего, или привносит
свои.
Это как слои в Фотошопе. Вы можете положить слой который всё притуманит, а можете
положить слой на котором будет нарисован дополнительный объект.

72. БЭМ-методология
Подробнее
bem.info/method/
bem.info/articles/yandex-frontend-dev/
72
Подробнее вы можете прочитать про методологию на сайте bem.info.

73. БЭМ-платформа
73
Все наши наработки вокруг БЭМ мы объединили в одну платформу.

74. БЭМ-платформа
M
BEM
Методология
• блок-элемент-модификатор
• технологии блока
• уровни переопределения
74
В неё входит методология разработки сайтов.

75. БЭМ-платформа
M RE
BEM
Runtime environment
• i-bem.js
• bemhtml
• server libs
75
Среда исполнения.
Это набор технологий, облегчающих написание кода и хорошо работающих вместе.
Про это будет рассказывать Серегей Бережной.

76. БЭМ-платформа
M RE
DE
BEM
Development environment
• bem-tools / borschik
• csso / svgo
• borschik
• bem.info
76
Инструменты для упрощения разработки и оптимизации кода.
Про них будет подробно рассказывать Вова Гриненко и Лёша Андросов.

77. БЭМ-платформа
M RE TE
DE
BEM
Testing environment
• тестирование
блоков
77
Инфраструктура для тестирования блоков.

78. БЭМ-платформа
M RE TE blocks
DE
BEM
Библиотеки блоков
bem-core bem-controls …
bem bem-page input bem-media
jquery text button
page
checkbox video
header
flash
footer
78
И библиотеки блоков.
Это аналог Twitter Bootstrap, готовые к использованию блоки. В отличие от Бутстрапа,
разработчик сайта может легко использовать свой дизайн вместо стандартного.
Мы будем выносить блоки из своей внутренней библиотеки в Open Source, первый релиз
запланирован на лето.

79. БЭМ-платформа
M RE TE blocks
DE
Open Source BEM
79
Часть платформы мы сразу разрабатываем в Open Source, часть вынесем из нашей
внутренней платформы в течение этого года.

80. БЭМ-платформа
M RE TE blocks
DE
Open Source BEM
JavaScript
80
В платформе используется один язык программирования — JavaScript.
На JavaScript реализуются блоки для браузера и для сервера, и инструменты.

81. Комьюнити
81
Мы хотим построить вокруг проекта коммьюнити, чтобы обмениваться идеями и
реализацией.

82. Комьюнити
• @bem_tw
82
Мы ведём твиттер @bem_tw для быстрого способа чем-то поделиться.
Вы можете задавать нам там короткие вопросы.

83. Комьюнити
• @bem_tw
• fb.com/groups/bem.info
83
В группе в Facebook вы можете выкладывать ссылки на свои проекты и обсуждать вместе
с другими разработчиками.

84. Комьюнити
• @bem_tw
• fb.com/groups/bem.info
• github.com/bem
84
И, конечно, слать свои пул-реквесты для улучшения кода и документации!

85. bem.info
85
Если вы заинтересовались БЭМ — подробную информацию можно получить на сайте
bem.info.
И не стесняйтесь задавать вопросы сейчас и после доклада.

86. Виталий Харисов
Руководитель
отдела инфраструктуры
разработки интерфейсов
vitaly@yandex-team.ru
@harisov
bem.info
Это всё. Спасибо за внимание!