БЭМ — это технология разработки сайтов, которые нужно быстро создать и долго поддерживать. Она используется в разработке фронтенда почти всех сервисов Яндекса и успела обрасти большим набором библиотек и инструментов, которым мы хотим с вами поделиться.
Имея в своих руках обширный арсенал БЭМ со всей его модульностью и мощью, остаётся «всего-то» придумать идею и реализовать её. На мастер-классе вы сможете вместе с нами создать то, что мы «только что» придумали.
Вы узнаете, в чём преимущество вёрстки независимыми блоками и что такое «уровни переопределения», познакомитесь с готовыми библиотеками блоков и инструментами для автоматизации сборки. Мы покажем, как разные инструменты для упрощения жизни разработчика, вроде autoprefixer, css-препроцессора roole и модульной системы YModules, встраиваются в процесс разработки на БЭМ и создают по-настоящему удобную платформу. На живом примере мы объясним, в чём польза декларативного подхода, когда одни и те же идеи можно использовать как для CSS, так и для JS. Более того, декларативным шаблонам: BEMHTML и BEMTREE, которые позволяют преобразовывать сырые данные во view-ориентированный BEMJSON, — будет посвящена одна из трёх частей мастер-класса.
В результате получится работающий сайт, а вы на практике познакомитесь с полным стеком БЭМ-технологий.
После мастер-класса запланировано дополнительное время на полезное общение: вы сможете рассказать о трудностях, с которыми встретились при реализации проекта на БЭМ, и мы вместе подумаем, как воплотить вашу идею в жизнь.
15. БЭМ — что это?
15
Блок — независимый интерфейсный компонент
16. БЭМ — что это?
16
Блок — независимый интерфейсный компонент
Элемент — составная часть блока
17. БЭМ — что это?
17
Блок — независимый интерфейсный компонент
Элемент — составная часть блока, не имеющая смысла вне
контекста этого блока
Модификатор — это свойство блока или элемента , задающее
изменения в их внешнем виде или поведении
18. БЭМ — что это?
18
Методология БЭМ на bem.info bit.ly/1hMHNB2
Доклад Вовы Гриненко про методологию БЭМ и БЭМ-платформу
bit.ly/1hMCKk5
91. JavaScript и BEMHTML
76
специализированный язык (DSL), расширяющий JavaScript
можно использовать любые JavaScript конструкции
компилируется в оптимизированный JavaScript
92. JavaScript и BEMHTML
76
специализированный язык (DSL), расширяющий JavaScript
можно использовать любые JavaScript конструкции
компилируется в оптимизированный JavaScript
исполняется на клиенте и сервере
109. Шаблон BEMHTML. Терминология
86
Мода — шаг генерации фрагмента HTML элемента
(тега, атрибута, класса и т.п.)
Предикат — набор условий
Подпредикаты — единичные (элементарные) условия
110. Шаблон BEMHTML. Терминология
86
Мода — шаг генерации фрагмента HTML элемента
(тега, атрибута, класса и т.п.)
Предикат — набор условий
Подпредикаты — единичные (элементарные) условия
this.ctx — доступная структура данных
115. Шаблон BEMHTML. Моды
88
default — набор и порядок прохождения остальных мод
tag — генерация HTML тэга
js — наличие js и параметры
116. Шаблон BEMHTML. Моды
88
default — набор и порядок прохождения остальных мод
tag — генерация HTML тэга
js — наличие js и параметры
bem — генерация классов БЭМ-сущности
117. Шаблон BEMHTML. Моды
88
default — набор и порядок прохождения остальных мод
tag — генерация HTML тэга
js — наличие js и параметры
bem — генерация классов БЭМ-сущности
cls — кастомные классы
118. Шаблон BEMHTML. Моды
88
default — набор и порядок прохождения остальных мод
tag — генерация HTML тэга
js — наличие js и параметры
bem — генерация классов БЭМ-сущности
cls — кастомные классы
mix — несколько БЭМ-блоков на одной DOM-ноде
119. Шаблон BEMHTML. Моды
88
default — набор и порядок прохождения остальных мод
tag — генерация HTML тэга
js — наличие js и параметры
bem — генерация классов БЭМ-сущности
cls — кастомные классы
mix — несколько БЭМ-блоков на одной DOM-ноде
jsAttrs — имя HTML-атрибута для параметров клиентского js
120. Шаблон BEMHTML. Моды
88
default — набор и порядок прохождения остальных мод
tag — генерация HTML тэга
js — наличие js и параметры
bem — генерация классов БЭМ-сущности
cls — кастомные классы
mix — несколько БЭМ-блоков на одной DOM-ноде
jsAttrs — имя HTML-атрибута для параметров клиентского js
attrs — позволяет задать имена и значения произвольных HTML-
атрибутов
121. Шаблон BEMHTML. Моды
88
default — набор и порядок прохождения остальных мод
tag — генерация HTML тэга
js — наличие js и параметры
bem — генерация классов БЭМ-сущности
cls — кастомные классы
mix — несколько БЭМ-блоков на одной DOM-ноде
jsAttrs — имя HTML-атрибута для параметров клиентского js
attrs — позволяет задать имена и значения произвольных HTML-
атрибутов
content — содержимое HTML-элемента
208. 149
BEMDOM.decl('form', {
myMethod: function() {
// экземпляр
this
// ссылка на класс
this.__self
// статический метод класса
this.__self.myStaticMethod()
// super-call
this.__base()
}
});
209. 150
BEMDOM.decl('form', { /* … */ }, {
myStaticMethod: function() {
// класс
this
// super-call
this.__base()
}
});
236. Итого
177
собрали агрегатор ^_^ про БЭМ из твиттера и инстаграма
заиспользовали полный БЭМ-стек, а именно
project-stub с bem-core и bem-components на сборке bem-tools
внутри работают технологии i-bem.js, BEMHTML, BEMTREE