![Page 1: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/1.jpg)
Руководитель отделаинфраструктуры разработки интерфейсов
БЭМ:от методологии до платформыВиталий Харисов
Я.Субботник, Рига, 6 апреля 2013 года
Привет!
Меня зовут Виталий Харисов, я работаю в Яндексе и занимаюсь созданием внутренней платформы для разработки интерфейсов.
Её open source часть называется БЭМ (от слов Блок-Элемент-Модификатор).
![Page 2: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/2.jpg)
Обо мне
[email protected]@harisov
— из Симферополя— отвечаю за разработку платформы БЭМ— пришёл в Яндекс в 2005 году как HTML-верстальщик— прошёл путь от вёрстки независимыми блоками до— разработки БЭМ-платформы
2Это наш подход к разработке сайтов, который развивался в Яндексе в течение нескольких лет.
Думаю, что он будет полезен вам, как web-разработчикам.
Прежде чем мы начнём, скажите, кто-то из вас знает, что такое БЭМ? Поднимите руки, пожалуйста.
![Page 3: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/3.jpg)
Процесс разработки
3Давайте рассмотрим процесс разработки сайта, как это происходит обычно.
![Page 4: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/4.jpg)
Процесс разработки
Дизайн
4В начале создаётся дизайн сайта.
![Page 5: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/5.jpg)
Процесс разработки
PSD
Дизайн
5После того, как макет создан дизайнером и утверждён заказчиком…
![Page 6: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/6.jpg)
Процесс разработки
Дизайн Статика
6
PSD
…он передаётся на вёрстку.
![Page 7: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/7.jpg)
Процесс разработки
Дизайн
HTML
Статика
7
CSSPSD
Верстальщик делает вёрстку в HTML/CSS, добивается кроссбраузерности.
![Page 8: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/8.jpg)
Процесс разработки
Дизайн Статика Динамика
8
HTMLCSS
PSD
После чего свёрстанный HTML передаётся программисту для создания сайта.
![Page 9: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/9.jpg)
Процесс разработки
Дизайн Статика Динамика
JSHTMLCSS
PSD
9Он оживляется с помощью JavaScript'а…
![Page 10: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/10.jpg)
Процесс разработки
Дизайн Статика
JS
Динамика
PHPHTMLCSS
PSD
10…и разрезается на шаблоны. Например, PHP. Это может быть любой другой шабонизатор на ваш вкус.
![Page 11: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/11.jpg)
Процесс разработки
Дизайн Статика
JS
Динамика
PHP
Проблема11
HTMLCSS
PSD
При таком процессе разработки возникает проблема.
![Page 12: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/12.jpg)
Процесс разработки
Дизайн Статика
JS
Динамика
PHP
12
HTMLCSS
PSD
ПроблемаИ она состоит не в том, что используется PHP, нет. :)
![Page 13: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/13.jpg)
Процесс разработки
Дизайн Статика
JS
Динамика
PHP
Рвётся связь13
HTMLCSS
PSD
Проблема заключается в том, что программист, делая шаблоны, не расширяет то, что уже сделал верстальщик, а фактически делает работу заново, перенося результат работы верстальщика в свой код.
Он по другому разделяет на функциональные части.
То же самое часто происходит при добавлении JavaScript, когда для скрипта использются отдельные классы.
![Page 14: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/14.jpg)
Процесс разработки
Дизайн Статика
JS
Динамика
PHP
Разные термины14
HTMLCSS
PSD
Термины, которые использует программист, отличаются от тех, что используются в вёрстке.
![Page 15: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/15.jpg)
Процесс разработки
Дизайн Статика
JS
Динамика
PHP
15
HTMLCSS
PSD
Аналогично проблема в том, что верстальщик не продолжает работать с тем, что сделал дизайнер, развивая и обогащая его работу.
![Page 16: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/16.jpg)
Процесс разработки
Дизайн Статика
JS
Динамика
PHP
16
HTMLCSS
PSD
Рвётся связьВерстальщик разбирает на части то, что сделал дизайнер и, фактически, строит свою башню заново.
![Page 17: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/17.jpg)
Процесс разработки
Дизайн Статика
JS
Динамика
PHP
17
HTMLCSS
PSD
Разные терминыДизайнер называет части макета по своему, верстальщик — по своему.
Они говорят на разных языках, описывая один и тот же интерфейс разными терминами.
![Page 18: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/18.jpg)
Процесс разработки
Дизайн Статика
JS
Динамика
PHP
18
HTMLCSS
PSD
tagsНапример, метки у дизайнера могут называться tags, …
![Page 19: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/19.jpg)
Процесс разработки
Дизайн Статика
JS
Динамика
PHP
19
HTMLCSS
PSD
tags marks…у верстальщика marks, …
![Page 20: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/20.jpg)
Процесс разработки
Дизайн Статика
JS
Динамика
PHP
tags marks labels20
HTMLCSS
PSD
а у программиста labels.
![Page 21: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/21.jpg)
21Вавилон.
![Page 22: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/22.jpg)
Процесс разработки
Дизайн Статика
JS
Динамика
PHP
Сделал — забыл22
HTMLCSS
PSD
Это не доставляет неудобств, если проект делается один раз в режиме сделал-забыл.
![Page 23: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/23.jpg)
Процесс разработки
Дизайн Статика
JS
Динамика
PHP
Изменения23
HTMLCSS
PSD
Но если проект живёт и развивается, если в него вносятся постоянные изменения, то эта рассинхронизация между разными специалистами…
![Page 24: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/24.jpg)
Процесс разработки
Дизайн Статика
JS
Динамика
PHP
Замедление работы24
HTMLCSS
PSD
…начинает замедлять работу.
![Page 25: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/25.jpg)
Процесс разработки БЭМ
25Сталкиваясь с такими проблемами в своей работе, мы придумали другой процесс разработки, который…
![Page 26: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/26.jpg)
Процесс разработки БЭМ
• повторное использование
26…позволяет повторно использовать работу разных специалистов…
![Page 27: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/27.jpg)
Процесс разработки БЭМ
• повторное использование• единые термины
27…и говорить им на одном языке.
В чём он заключается?
![Page 28: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/28.jpg)
Процесс разработки БЭМ
Дизайн
28Дизайнер, когда проектирует интерфейс, понимает, из каких частей он состоит и как эти части называются.
![Page 29: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/29.jpg)
Процесс разработки БЭМ
Дизайн
Статика
29При передаче макета верстальщику передаётся не только картинка, но и то, как называются те или иные части интерфейса по мнению дизайнера.
![Page 30: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/30.jpg)
Процесс разработки БЭМ
Дизайн
Статика
Договариваются30Верстальщик берёт систему именования дизайнера или они договариваются об изменении терминов, чтобы полноценно описать интерфейс, который получается после вёрстки.
![Page 31: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/31.jpg)
Процесс разработки БЭМ
Дизайн
Статика
Динамика
31При добавлении JavaScript и нарезки в шаблоны используется уже созданная система именования и реализации, а не выдумывается своя.
![Page 32: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/32.jpg)
Процесс разработки БЭМ
Дизайн
Статика
Динамика
Договариваются32Если что-то надо изменить — участники процесса договариваются между собой.
![Page 33: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/33.jpg)
Процесс разработки БЭМ
ДизайнСтатика
Динамика33
При таком процессе все участники процесса вкладываются в одно дело, постепенно развивая и улучшая проект.
![Page 34: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/34.jpg)
Процесс разработки БЭМ
ДизайнСтатика
Динамика Документация34
Такой процесс позволяет добавлять специалистов другой специализации, например, документаторов для работы над общим кодом.
![Page 35: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/35.jpg)
Процесс разработки БЭМ
ДизайнСтатика
Динамика ДокументацияДинамика
Статика
35И такой процесс позволяет добавлять специалистов в тех случаях, когда нужно где-то усилить команду.
![Page 36: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/36.jpg)
БЭМ-методология
36Давайте разберём, что такое БЭМ-методология.
![Page 37: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/37.jpg)
БЭМ-методология
37
Блок
В основе методологии лежит «Блок».
![Page 38: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/38.jpg)
БЭМ-методология
buttoninput
38
Блок
Визуальный
Причём, это может быть как визуальный блок, прямоугольник на экране.
![Page 39: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/39.jpg)
БЭМ-методология
requestresponse
39
Блок
Визуальный Не визуальный
Так и любая вспомогательная функциональность проекта, не имеющая визуального представления.
Например, как блоки может быть оформлено ajax-взаимодействие.
![Page 40: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/40.jpg)
БЭМ-методология
Элементы
40Блок может состоять из элементов, которые являются его составными частями и вне блока смысла не имеют.
![Page 41: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/41.jpg)
БЭМ-методология
Элементы
Визуальные Не визуальные
41Элементы тоже могут быть как визуальные, так и вспомогательные, без внешнего вида.
![Page 42: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/42.jpg)
БЭМ-методология
Модификаторы Блока
_style_dashed
42Модификатор изменяет внешний вид блока или …
![Page 43: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/43.jpg)
БЭМ-методология
_type_ajax
Модификаторы Блока
43…его поведение. Модификатор может быть не визуальным.
![Page 44: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/44.jpg)
БЭМ-методология
_style_dashed_theme_green
Модификаторы Блока
44Может быть несколько модификаторов одновременно.
![Page 45: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/45.jpg)
БЭМ-методология
Модификаторы Блока
_theme_red
45
_style_dashed_theme_green
Модификатор может принимать разные значения.
![Page 46: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/46.jpg)
БЭМ-методология
_hovered_yes
_style_dashed
Модификаторы Блока
_hovered_yes
46
_theme_red _theme_green
Они могут добавляться…
![Page 47: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/47.jpg)
БЭМ-методология
_style_dashed_theme_green
Модификаторы Блока
_theme_red
47
_theme_red _theme_green
…и убираться динамически.
![Page 48: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/48.jpg)
_style_dashed _theme_green
_style_dotted_theme_red
Модификаторы Элементов
48
БЭМ-методология
Модификаторы могут быть у элементов.
![Page 49: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/49.jpg)
БЭМ-методология
Технологии.html
49
Tech
Теперь поговорим о технологиях, из которых реализуется блок.
Каждый блок реализуется в одной или нескольких технологиях.
![Page 50: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/50.jpg)
БЭМ-методология
Технологии.html
.css.css
Tech
50Причём, вы можете сначала сделать вёрстку для блока.
![Page 51: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/51.jpg)
БЭМ-методология
Технологии.html
.css.js
Tech
51Потом добавить к нему JavaScript-реализацию, …
![Page 52: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/52.jpg)
БЭМ-методология
Технологии.bemhtml
.css.js
Tech
52…шаблоны, …
![Page 53: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/53.jpg)
БЭМ-методология
Технологии.bemhtml
.css.js
.ru.mdTech
53…и документацию.
В каждой из технологий блок имеет своё отражение.
![Page 54: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/54.jpg)
БЭМ-методология
Реализацияблока
54
.bemhtml.css
.js.ru.md
Tech
И все технологии вместе образуют реализацию этого блока.
![Page 55: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/55.jpg)
БЭМ-методология
Блокпервичен
55
Реализацияблока
.bemhtml.css
.js.ru.md
Tech
В БЭМ подходе к реализации сайтов блок выходит на передний план, …
![Page 56: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/56.jpg)
БЭМ-методология
56
Реализацияблока
.bemhtml.css
.js.ru.md
Tech
Технологиивторичны
Блокпервичен
…а технологии, реализующие его — вторичны.
![Page 57: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/57.jpg)
БЭМ-методология
Уровни переопределения
57Рассмотрим ещё одно ключевое понятие в БЭМ-методологии — уровни переопределения.
![Page 58: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/58.jpg)
БЭМ-методология
Уровни переопределения
Проект А
Блок А1 Блок А2
Блок А3 Блок А4
58Проект делается из блоков.
![Page 59: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/59.jpg)
БЭМ-методология
Уровни переопределения
Проект А
Блок А1 Блок А2
Блок А3 Блок А4
Проект Б
Блок Б1 Блок Б2
Блок Б3 Блок Б4
59Разные проекты…
![Page 60: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/60.jpg)
БЭМ-методология
Уровни переопределения
Проект А
Блок А1 Блок А2
Блок А3 Блок А4
Проект Б
Блок Б1 Блок Б2
Блок Б3 Блок Б4
60…могут содержать общие блоки и в этом случае можно выделить…
![Page 61: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/61.jpg)
БЭМ-методология
Уровни переопределения
Блок А1
Библиотекаблоков
Блок 1Блок А2
Блок А4
Блок Б1
Блок Б3 Блок Б4
Блок 2
61…общую библиотеку, куда поместить эти блоки.
![Page 62: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/62.jpg)
БЭМ-методология
Уровни переопределения
Блок А1Блок 1
Блок А2
Блок А4
Блок Б1
Блок Б3 Блок Б4
Блок 1
Блок 1Библиотекаблоков
Блок 2
62И потом использовать этот общий блок из библиотеки блоков.
![Page 63: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/63.jpg)
БЭМ-методология
Уровни переопределения
Блок А1Блок 1
Блок А2
Блок А4
Блок Б1
Блок Б3 Блок Б4
Блок 1
Блок 1Библиотекаблоков
Блок 2
63При этом на проекте можно доопределять этот блок до нужного вида или поведения.
![Page 64: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/64.jpg)
БЭМ-методология
Уровни переопределения
Уровень библиотеки
Уровеньпроекта А
Уровеньпроекта Б
64Место, где лежит реализация блока, мы называем уровнем переопределения.
Причём таких уровней как на проекте, так в библиотеке может быть много.
![Page 65: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/65.jpg)
БЭМ-методология
Уровни переопределения
desktop
desktop
desktop
65Например, у нас есть только десктопная реализация сайта.
![Page 66: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/66.jpg)
БЭМ-методология
Уровни переопределения
desktoptouch
desktop
desktoptouch
66И в какой-то момент мы начинаем делать реализацию сайта для тач-устройств.
![Page 67: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/67.jpg)
БЭМ-методология
Уровни переопределения
desktoptouch
desktop
commondesktop
touch
67И понимаем, что у нас есть общие блоки между десктопной и тачевой реализациями библиотеки.
Выносим их на common уровень.
![Page 68: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/68.jpg)
БЭМ-методология
Уровни переопределения
commondesktop
touch
commondesktop
touch
desktop
68Между десктопной и тачевой версией сайта тоже есть общие блоки, они переходят на общий уровень проекта.
![Page 69: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/69.jpg)
БЭМ-методология
Уровни переопределения
commondesktop
touch
commondesktop
touch
desktop
69И теперь реализации блоков для десктопного сайта располагаются на уровнях common и desktop библиотеки…
![Page 70: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/70.jpg)
БЭМ-методология
Уровни переопределения
commondesktop
touch
commondesktop
touch
desktop
70…и common и desktop проекта.
![Page 71: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/71.jpg)
БЭМ-методология
Уровни переопределения
commondesktop
touch
commondesktop
touch
desktop
1 2
3 4
71При этом финальная реализация блока собирается с разных уровней в указанном порядке.
Каждый последующий уровень или доопределяет блоки с предыдущего, или привносит свои.
Это как слои в Фотошопе. Вы можете положить слой который всё притуманит, а можете положить слой на котором будет нарисован дополнительный объект.
![Page 72: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/72.jpg)
БЭМ-методология
Подробнее
bem.info/articles/yandex-frontend-dev/
bem.info/method/
72Подробнее вы можете прочитать про методологию на сайте bem.info.
![Page 73: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/73.jpg)
БЭМ-платформа
73Все наши наработки вокруг БЭМ мы объединили в одну платформу.
![Page 74: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/74.jpg)
BEM
БЭМ-платформа
M
Методология• блок-элемент-модификатор• технологии блока• уровни переопределения
74В неё входит методология разработки сайтов.
![Page 75: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/75.jpg)
M RE
БЭМ-платформа
BEMRuntime environment
• i-bem.js• bemhtml• server libs
75Среда исполнения.
Это набор технологий, облегчающих написание кода и хорошо работающих вместе.
Про это будет рассказывать Серегей Бережной.
![Page 76: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/76.jpg)
M REDE
БЭМ-платформа
BEMDevelopment environment
• bem-tools / borschik• csso / svgo• borschik• bem.info
76Инструменты для упрощения разработки и оптимизации кода.
Про них будет подробно рассказывать Вова Гриненко и Лёша Андросов.
![Page 77: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/77.jpg)
БЭМ-платформа
M REDE
TE
BEMTesting environment
• тестированиеблоков
77Инфраструктура для тестирования блоков.
![Page 78: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/78.jpg)
БЭМ-платформа
M REDE
TE blocks
BEM
bem-corebem-page
bem-controlsbem-media …
pageheaderfooter
inputbuttoncheckbox
textvideoflash
bemjquery
Библиотеки блоков
78И библиотеки блоков.
Это аналог Twitter Bootstrap, готовые к использованию блоки. В отличие от Бутстрапа, разработчик сайта может легко использовать свой дизайн вместо стандартного.
Мы будем выносить блоки из своей внутренней библиотеки в Open Source, первый релиз запланирован на лето.
![Page 79: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/79.jpg)
БЭМ-платформа
M REDE
TE blocks
BEM
79
Open Source
Часть платформы мы сразу разрабатываем в Open Source, часть вынесем из нашей внутренней платформы в течение этого года.
![Page 80: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/80.jpg)
БЭМ-платформа
M REDE
TE blocks
BEM
80
Open SourceJavaScript
В платформе используется один язык программирования — JavaScript.
На JavaScript реализуются блоки для браузера и для сервера, и инструменты.
![Page 81: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/81.jpg)
Комьюнити
81Мы хотим построить вокруг проекта коммьюнити, чтобы обмениваться идеями и реализацией.
![Page 82: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/82.jpg)
Комьюнити
82
• @bem_tw
Мы ведём твиттер @bem_tw для быстрого способа чем-то поделиться.
Вы можете задавать нам там короткие вопросы.
![Page 83: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/83.jpg)
Комьюнити
83
• @bem_tw• fb.com/groups/bem.info
В группе в Facebook вы можете выкладывать ссылки на свои проекты и обсуждать вместе с другими разработчиками.
![Page 84: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/84.jpg)
Комьюнити
• @bem_tw• fb.com/groups/bem.info• github.com/bem
84И, конечно, слать свои пул-реквесты для улучшения кода и документации!
![Page 85: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/85.jpg)
85
bem.infoЕсли вы заинтересовались БЭМ — подробную информацию можно получить на сайте bem.info.
И не стесняйтесь задавать вопросы сейчас и после доклада.
![Page 86: Виталий Харисов "БЭМ: от методологии до платформы"](https://reader034.vdocuments.net/reader034/viewer/2022042602/557f3813d8b42ad4798b5048/html5/thumbnails/86.jpg)
bem.info
Руководительотдела инфраструктуры разработки интерфейсов
@harisov
Виталий Харисов
bem.info
Это всё. Спасибо за внимание!