Полный обзор существующих частей БЭМ-экосистемы. Рассказ о том, что у нас есть сейчас, в какой оно степени готовности, в чём нам можно помочь в разработке БЭМ, а также о наших желаниях на будущее.

1. Настоящее и будущее БЭМ
Виталий Харисов
Руководитель разработки на Украине
Я.Субботник, Москва, 8 cентября 2012 года
Здравствуйте, меня зовут Виталий Харисов.
Сегодня я хочу дать вам обзор существующих частей БЭМ, рассказать что у нас есть сейчас.
Поговорить о наших планах на будущее и чем нам можно помочь в разработке БЭМ.

2. Настоящее
2
Итак, давайте посмотрим, что такое БЭМ сейчас.

3. Методология
3
В основе БЭМ-экосистемы лежит методология, задающая правила построения сайта, правила
работы с кодом.

4. Методология
— Порядок в коде
4
Эти правила облегчают разработку за счёт введения порядка в код.

5. Методология
— Порядок в коде
— Упрощение работы в команде
5
Так же они упрощают командную работу — каждый игрок в команде не пишет код по своим
правилам, а делает это согласовано с другими членами команды.

6. Методология
Блоки
blocks/
head/
foot/
…
6
По этой методологии весь код проекта делится на блоки.

7. Методология
Технологии
blocks/
head/
head.css
head.js
head.bemhtml
7
Реализация блока состоит из множества технологий.

8. Методология
Технологии
blocks/
head/
head.css
head.js
head.bemhtml
8
По БЭМ-методологии разделение проекта на блоки находится на первом плане…

9. Методология
Технологии
blocks/
head/
head.css
head.js
head.bemhtml
9
…а то на каких технологиях реализован блок — на последнем плане.

10. Методология
Технологии: Документация
tutorials/
prerequisites.wiki
hello-world.wiki
second-page.wiki
10
Это нас приводит к тому, что документация к проекту тоже может быть выражена в терминах БЭМ
и работать с ней можно точно так же, как с кодом проекта.
Здесь каждый файл это отдельный блок с одной технологией .wiki

11. Методология
Уровни переопределения
blocks/
.bem/
head/
foot/
…
11
Блоки раскладываются на уровни переопределения.

12. Методология
Уровни переопределения
blocks/
.bem/
level.js
head/
foot/
…
12
Каждый уровень переопределения может иметь свою настройку схемы именования БЭМ-
сущностей и настройку технологий, которые используются при создании блоков.

13. Методология
Уровни переопределения
blocks/
.bem/
level.js
head/
head.css
head.js
head.bemhtml
13
В этом случае схема именования — каждый блок в своей директории, …

14. Методология
Уровни переопределения
blocks/
.bem/
level.js
head/
head.css
head.js
head.bemhtml
14
…технологии это файлы.

15. Методология
Уровни переопределения
tutorials/
.bem/
level.js
prerequisites.wiki
hello-world.wiki
second-page.wiki
15
А в случае с документацией, настройки уровня задают…

16. Методология
Уровни переопределения
tutorials/
.bem/
level.js
prerequisites.wiki
hello-world.wiki
second-page.wiki
16
…использование одного файла для реализации каждого блока.

17. Методология
Уровни переопределения
blocks-common/
.bem/
head/
blocks-desktop/
.bem/
head/
17
Реализация блока может быть на нескольких уровнях переопределения.

18. Методология
Наборы уровней переопределения
blocks-common/
blocks-desktop/
pages-desktop/index/
18
Уровни переопределения собираются в наборы, которые задают порядок, в котором собирается
финальная реализация блока.

19. Методология
Элементы
blocks/
head/
head.css
19
Блок состоит…

20. Методология
Элементы
blocks/
head/
__logo/
head__logo.css
head.css
20
…из элементов, которые являются минимальной структурной единицей.

21. Методология
Элементы
<div class="head">
<div class="head__logo">
<div class="head__logo-text">
TEXT
21
Элементы могут вкладываться один…

22. Методология
Элементы
<div class="head">
<div class="head__logo">
<div class="head__logo-text">
TEXT
22
…в другой при использовании, …

23. Методология
Элементы
blocks/
.bem/
head/
__logo/
head__logo.css
__logo-text/
head__logo-text.css
23
…но при описании иерархии нет, …

24. Методология
Элементы
blocks/
.bem/
head/
__logo/
head__logo.css
__logo-text/
head__logo-text.css
24
…все элементы описываются одним плоским списком внутри блока.

25. Методология
Миксы
<div class="head">
<div class="head__logo">
25
Блоки можно смешивать…

26. Методология
Миксы
<div class="head i-bem">
<div class="head__logo">
26
…с другими блоками…

27. Методология
Миксы
<div class="head i-bem">
<div class="head__logo b-logo">
27
…или смешивать блоки…

28. Методология
Миксы
<div class="head i-bem">
<div class="head__logo b-logo">
28
…с элементами. Или элементы с элементами.
Про это будет подробный доклад Кира.

29. Методология
Модификаторы
blocks/
head/
_size/
head_size_big.css
29
У блока может быть один…

30. Методология
Модификаторы
blocks/
head/
_size/
head_size_big.css
_type/
head_type_search.css
30
…или несколько модификаторов, которые изменяют его.

31. Методология
Модификаторы
blocks/
head/
_size/
head_size_big.css
31
Модификатор имеет имя и может принимать…

32. Методология
Модификаторы
blocks/
head/
_size/
head_size_big.css
head_size_normal.css
head_size_small.css
32
…разные значения.

33. Методология
Что почитать?
Статья «Что такое БЭМ?»
33
Подробно это всё описано в статье «Что такое БЭМ?» на гитхабе.

34. Методология
История
Статья:
clubs.ya.ru/bem/1398
Видео:
clubs.ya.ru/yasubbotnik/497
34
Про историю создания БЭМ я рассказывал на минском Я.Субботнике в начале лета, можно
посмотреть видео рассказа clubs.ya.ru/yasubbotnik/497 или почитать статью clubs.ya.ru/bem/1398

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

36. bem-tools
36
Для упрощения и облегчения работы мы разрабатываем bem-tools позволяющие оперировать
БЭМ-сущностями: …

37. Инструменты
bem-tools
— создавать
— уровни переопределения
— блоки
— элементы
— модификаторы
37
…создавать уровни переопределения, блоки, элементы, модификаторы; …

38. Инструменты
bem-tools
— работать с технологиями
38
bem-tools позволяют работать с разными технологиями у БЭМ-сущностей.

39. Инструменты
bem-tools
— работать с технологиями
— технологии по умолчанию
39
На уровне переопределения можно задать технологии по умолчанию, использующиеся при
создании сущностей на этом уровне.

40. Инструменты
bem-tools
— работать с технологиями
— технологии по умолчанию
— шаблоны технологий
40
У любой технологии можно задать шаблон, который будет использоваться при создании.

41. Инструменты
bem-tools
— работать с технологиями
— технологии по умолчанию
— шаблоны технологий
— добавлять к имеющимся
41
Можно добавлять технологии к уже имеющимся сущностям.

42. Инструменты
bem-tools
— работать с уровнями переопределения
42
bem-tools позволяют работать с несколькими уровнями переопределения: …

43. Инструменты
bem-tools
— работать с уровнями переопределения
— при создании
43
…при создании сущности указывается на каком уровне это сделать; …

44. Инструменты
bem-tools
— работать с уровнями переопределения
— при создании
— при сборке
44
…при сборке указывается набор уровней, которые надо использовать.

45. Инструменты
bem-tools
— сборка проекта
45
bem-tools помогают собрать проект…

46. Инструменты
bem-tools
— сборка проекта
— при разработке
46
…во время разработки…

47. Инструменты
bem-tools
— сборка проекта
— при разработке
— для продакшена
47
…и для выкладки в продакшен.

48. Другие инструменты
48
Помимо bem-tools мы разрабатываем ещё другие инструменты, которые можно использовать в
отрыве от БЭМ.

49. Инструменты
Работа с файлами
— borschik
github.com/veged/borschik
— setochka
github.com/afelix/setochka
49
Инструменты для работы с файлами:
* Расширяемый сборщик текстовых файлов.
Может использоваться для сборки CSS, JS и других файлов.
* Сеточка позволяет выделить CSS-свойств исходного CSS в отдельные файлы.
Может использоваться для разбиения CSS-файла на несколько с вендорными префиксами.

50. Инструменты
Оптимизаторы
— csso
github.com/css/csso
— imgo
github.com/imgo/imgo
— svgo (в разработке)
github.com/deepsweet/svgo
50
Мы разрабатываем оптимизаторы для разных форматов:
* структурный оптимизатор CSS
* оптимизатор для PNG и JPEG
* оптимизатор SVG (в разработке)

51. Инструменты
Парсеры / языки
— OmetaJS
github.com/veged/ometa-js
— smakowiki
github.com/veged/shmakowiki
— gonzales (в разработке)
github.com/afelix/gonzales
51
Мы разрабатываем парсеры для языков и сами языки:
* OmetaJS — объектно-ориентированный язык для построения парсеров
* shmakowiki — диалект wiki, используем для своей документации
* gonzales — быстрый парсер CSS (в разработке)

52. Библиотека блоков bem-bl
52
Мы разрабатываем библиотеку блоков bem-bl.
Она состоит из двух частей.

53. Библиотека блоков bem-bl
Ядро
— шаблонизатор bemhtml
53
Первая часть это ядро, оно реализует технологии для облегчения работы с блоками.
Это шаблонизатор bemhtml, про который будет подробно рассказывать Вегед.

54. Библиотека блоков bem-bl
Ядро
— шаблонизатор bemhtml
— фреймворк клиентского JavaScript
54
И фреймворк для написания клиентского JavaScript, про который будет отдельная секция
докладов от Вовы, Вари и Саши.

55. Библиотека блоков bem-bl
Ядро
— шаблонизатор bemhtml
— фреймворк клиентского JavaScript
— ядро — это блок!
55
ВАЖНО: Ядро это тоже блок и мы не навязываем его использование.

56. Библиотека блоков bem-bl
Ядро
— шаблонизатор bemhtml
— фреймворк клиентского JavaScript
— ядро — это блок!
— можно заменить на свой блок
56
Можно этот блок и не использовать, например, если вы разрабатываете систему, где нельзя брать
сторонний код.

57. Библиотека блоков bem-bl
Блоки для сайтов
— блоков мало
— демонстрация как делать свои блоки
57
Так же в библиотеке есть минимальный набор блоков, помогающий в реализации сайта.
Мы понимаем, что это не полноценный набор блоков для построения сайта.
Этот набор можно рассматривать как демонстрационный, на этом примере можно понять, как
делать свои блоки.

58. Варианты использования БЭМ
58
Хочу обратить внимание, что БЭМ не имеет единственно правильного варианта использования и не
стремится его получить.
Наоборот, мы рассматриваем БЭМ как набор правил, который каждая конкретная команда
встраивает в свой процесс разработки и использует так, как удобно.
Давайте посмотрим на примерах.

59. Блоки в одном файле
59
У вас есть проект, в котором вы хотите применить БЭМ для вёрстки и ни для чего более.

60. Блоки в одном файле
Именование классов
.block
.block__elem
.block_size_l
.block__elem_size_l
60
Начинаете именовать классы в своём проекте по БЭМ-схеме.

61. Блоки в одном файле
И верстаете
myfacebook/
styles.css
scripts.js
index.html
61
Используйте самую простую схему на файловой системе, когда реализация всех блоков лежит в
одном файле соответствующей технологии.
При использовании этого варианта всё делается руками, без bem-tools.

62. Блоки в директории
62
Когда вы поймёте, что ваш проект вырос, можно начать раскладывать реализацию блоков по
файлам: …

63. Блоки в директории
blocks/
b-myblock.css
b-myblock.js
b-yourblock.css
b-yourblock.js
63
И начинаете использовать bem-tools для сборки проекта.

64. Не обязательное в файлах
64
Если в ваших блоках есть элементы/модификаторы, которые используются не на всех страницах…

65. Не обязательное в файлах
blocks/
b-myblock/
b-myblock_mod_val1.css
b-myblock__opt-elem.css
b-myblock__opt-elem_mod_val1.css
b-myblock.css
65
…можно вынести их реализацию в отдельные файлы, чтобы подключать только то, что нужно.

66. Модификаторы в директориях
66
Если модификаторов много…

67. Модификаторы в директориях
blocks/
b-myblock/
_mod/
b-myblock_mod_val1.css
b-myblock__opt-elem.css
b-myblock__opt-elem_mod_val1.css
b-myblock.css
67
…для каждого можно сделать отдельную директорию. Это разгрузит корневую директорию
блока.

68. Элементы/модификаторы
в директориях
68
Самый сложный в разработке, но самый понятный вариант по конечной структуре, когда ВСЕ
элементы блока и ВСЕ модификаторы имеют свои директории.

69. Элементы/модификаторы
в директориях
blocks/
b-myblock/
_mod/
b-myblock_mod_val1.css
__elem/
b-myblock__elem.css
b-myblock.css
69
Этот вариант самый наглядный, при взгляде на файловую систему можно увидеть всю структуру
блока.
Можно упростить его, вынося в директории только необязательные элементы, а код обязательных
элементов класть в основной файл блока.

70. Будущее
70
Итак, это то, что у нас есть уже сейчас.
Дальше я расскажу о наших планах на ближайшие полгода/год и в чём нам можно помочь, ибо
планов гораздо больше, чем мы успеваем сделать.

71. Полный стек
71
Мы хотим построить полный стек разработки сайтов.

72. Полный стек
— сложные системы
72
Чтобы можно было строить сложные системы используя наши технологии.

73. Полный стек
— сложные системы
— методология для всех частей системы
73
Для всех частей системы должны быть определены правила, как она строится.

74. Полный стек
— сложные системы
— методология для всех частей системы
— инструменты для всех частей системы
74
Эти правила должны быть подкреплены инструментами.

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

76. Сайт bem.info
76
До конца года мы хотим запустить сайт bem.info, на котором собрать информацию про БЭМ из
первых рук.

77. Сайт bem.info
— вся информация на одном сайте
77
В ходе работы над этим сайтом мы делаем документацию по использованию БЭМ.

78. Сайт bem.info
— вся информация на одном сайте
— английский / русский
78
Сайт будет на двух языках, русском и английском, с возможностью добавления других языков.

79. Сайт bem.info
Как помочь?
79
Чем нам можно будет помочь:

80. Сайт bem.info
Как помочь?
— Перевод документации на другие языки
— Поддержка актуальности перевода
80
Перевод документации на другие языки с поддержкой актуальности этого перевода по мере
изменения оригинальной документации.

81. Сайт bem.info
Как помочь?
— Перевод документации на другие языки
— Поддержка актуальности перевода
— Документация по настройке (Windows)
— Туториалы по внедрению БЭМ на сайты
81
* написание документации
* по настройке окружения (например, в Windows)
* туториалы по внедрению БЭМ в сайты, где он не используется

82. Инструменты
82
В разработке bem-tools мы сейчас сосредоточены на сборке проекта.
При этом есть вещи, которые мы хотим сделать в bem-tools помимо этого и тут может
пригодиться ваша помощь.

83. Инструменты
bem move
— перемещение сущностей между
уровнями
— переименование сущностей
— блок в элемент и наоборот
— перемещение модификаторов
83
* перемещение сущностей между уровнями переопределения с учётом настроек уровней
переопределения
* переименование сущностей
* превращение блоков в элементы и наоборот
* перемещение модификаторов
* между блоками и элементами

84. Инструменты
bem remove
— удаление сущностей
— с поиском использования
84
Корректное удаление сущности с поиском всех случаев её использования.

85. Инструменты
bem lint
— проверка блоков
85
Сделать bem lint, проверяющий целостность блока, что все сущности описаны правильно и лежат
на своих местах.

86. Инструменты
bem lint
— проверка блоков
— аналог jslint / jshint
clubs.ya.ru/yasubbotnik/395
86
Аналог jshint, про него рассказывать Митя Щадей на Субботнике в Киеве.

87. Инфраструктура
библиотек блоков
87
Мы работаем сейчас над инфраструктурой библиотек блоков…

88. Инфраструктура библиотек блоков
— создавать свои библиотеки блоков
— документация к библиотеке
— changelog'и
— скрипты миграции между версиями
— сайт с примерами и документацией
88
…неким набором правил и инструментов, которые позволят разработчикам
* создавать свои библиотеки блоков
* писать к ним документацию
* скрипты миграции с версии на версию
* changelog'и
* построить сайт для библиотеки блоков с живыми примерами и документацией

89. Библиотеки блоков
89
После того, как будет разработана инфраструктура библиотек блоков мы сможем разбить нашу
текущую библиотеку bem-bl на несколько.

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

91. Библиотеки блоков
Зачем?
— разные мейнтейнеры
— разные релизные циклы
— проще развивать и поддерживать
91
Зачем это нужно делать:
* много маленьких библиотек проще раздать в поддержку разным людям
* маленькие библиотеки можно выпускать с разной скоростью
* проще развивать и поддерживать

92. Библиотеки блоков
Примеры
— bl-core
корневые блоки на которых строятся последующие
— bl-generic
блоки, которые часто встречаются в вёрстке
страниц: ссылки, иконки
— bl-form
блоки для реализации форм, в том числе контролы
форм
92
Можно выделить в отдельные библиотеки ядро, блоки общего назначения, для работы с
формами…

93. Библиотеки блоков
Примеры
— bl-layout
типовые раскладки страниц
— bl-search
поисковая форма и выдача результатов поиска
— bl-flash
подключение флеша на страницу
— bl-auth
аутентификация пользователей
93
…типовые раскладки страниц, поиск по сайту, работа с флешем, аутентификация пользователей и
так далее.

94. Среда разработки
94
И на десерт самое вкусное :)

95. Среда разработки
Как сейчас
— работа с файловой системой
— поддержка целостности
— руками
— bem-tools
95
Сейчас разработчик, использующий БЭМ слишком близко находится к файловой системе и тратит
часть своего времени на поддержание целостности проекта на файловой системе руками или с
помощью bem-tools.

96. Среда разработки
Как хотим
— работа с БЭМ, а не файлами
— работа на всех платформах
— разработка в браузере!
— доступ к коду сайта рядом с самим сайтом
— Cloud9?
96
Нужна среда для разработки, которая будет знать про БЭМ, про уровни переопределения и
помогать разработчику писать код так, чтобы он был хорошо структурированным.
При этом эта среда не должна быть привязана к какой-то определённой платформе.
В идеале она вообще должна работать в браузере.
По одному адресу своего сайта разработчик редактирует код, а по другому адресу смотрит
результат.
Мы сейчас смотрим в сторону Cloud9.

97. Подведём итог
97
Итак, давайте подведём итог.

98. Подведём итог
Настоящее
— Методология
— Инструменты
— Библиотека блоков
— Шаблонизатор bemhtml
— JavaScript фреймворк i-bem.js
98
Мы сегодня рассмотрели настоящее БЭМ, увидели, что он состоит из:
* Методологии
* Инструментов
* Библиотеки блоков
* Технологий для шаблонизации и построения клиентского кода на JavaScript

99. Подведём итог
Будущее
— Полный стек
— Сайт bem.info
— Развитие инструментов
— Библиотеки блоков
— Среда разработки
99
И попробовали заглянуть в ближайшее будущее:
* Мы строим полный стек
* Будем сделать сайт со всей информацией
* Дальше развивать инструменты
* Делать библиотеки блоков
* И среду для разработки

100. Виталий Харисов
vitaly@yandex-team.ru
@harisov
#b_ #yasubbotnik
Спасибо за внимание.
Я готов ответить на ваши вопросы сейчас и в перерывах между докладами.