Download - JavaScript в БЭМ терминах
![Page 1: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/1.jpg)
YAC-2011, Москва, 19 сентября 2011 года
Варвара Степанова
JavaScript в БЭМ-терминах
Wednesday, October 5, 2011
![Page 2: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/2.jpg)
clck.ru/L45Cшпаргалка к мастер-классу
JavaScript в терминах БЭМ
Wednesday, October 5, 2011
![Page 3: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/3.jpg)
Блоки и элементы
3
Wednesday, October 5, 2011
![Page 4: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/4.jpg)
Модификаторы
4
Wednesday, October 5, 2011
![Page 5: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/5.jpg)
Уровни переопределения
5
Wednesday, October 5, 2011
![Page 6: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/6.jpg)
Составные блоки
6
Wednesday, October 5, 2011
![Page 7: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/7.jpg)
JS-реализация блока i-bem
7
Wednesday, October 5, 2011
![Page 8: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/8.jpg)
Некоторые особенностиFeatures
8
Wednesday, October 5, 2011
![Page 9: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/9.jpg)
Некоторые особенностиFeatures
9
Декларативный стиль
Wednesday, October 5, 2011
![Page 10: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/10.jpg)
Некоторые особенностиFeatures
10
Декларативный стиль
Отложенная инициализация
Wednesday, October 5, 2011
![Page 11: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/11.jpg)
Некоторые особенностиFeatures
11
Декларативный стиль
Отложенная инициализация
Использование вложенных блоков
Wednesday, October 5, 2011
![Page 12: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/12.jpg)
Некоторые особенностиFeatures
12
Декларативный стиль
Отложенная инициализация
Использование вложенных блоков
Реакция на изменение модификаторов
Wednesday, October 5, 2011
![Page 13: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/13.jpg)
Некоторые особенностиFeatures
13
Декларативный стиль
Отложенная инициализация
Использование вложенных блоков
Реакция на изменение модификаторов
Расширение поведения модификаторами и уровнями переопределения
Wednesday, October 5, 2011
![Page 14: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/14.jpg)
Что будем делать?
14
Wednesday, October 5, 2011
![Page 15: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/15.jpg)
b-cutБлок-cut
15
Wednesday, October 5, 2011
![Page 16: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/16.jpg)
b-cutБлок-cut
16
Wednesday, October 5, 2011
![Page 17: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/17.jpg)
Инструменты и окружение
17
Wednesday, October 5, 2011
![Page 18: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/18.jpg)
Инструменты и окружение
18
Локальный web-сервер
БЭМ-инструменты
github.com/bem/bem-tools
или clck.ru/Kz8v
Wednesday, October 5, 2011
![Page 19: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/19.jpg)
Инициализация проекта
19
Wednesday, October 5, 2011
![Page 20: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/20.jpg)
Инициализация проекта
20
Клонируем репозиторий
git://github.com/toivonen/yac2011-bem-js-docs.git
make
Получает библиотеку bem-bl
Собирает страницы
Wednesday, October 5, 2011
![Page 21: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/21.jpg)
Структура проекта
21
bem-bl/blocks/pages/GNUmakefile
Wednesday, October 5, 2011
![Page 22: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/22.jpg)
22
bem-bl/ blocks-common/ blocks-desktop/blocks/pages/GNUmakefile
Структура проекта
Wednesday, October 5, 2011
![Page 23: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/23.jpg)
23
bem-bl/ blocks-common/ i-bem/ ... blocks-desktop/blocks/pages/GNUmakefile
Структура проекта
Wednesday, October 5, 2011
![Page 24: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/24.jpg)
24
bem-bl/blocks/ b-cut/ ...pages/GNUmakefile
Структура проекта
Wednesday, October 5, 2011
![Page 25: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/25.jpg)
25
bem-bl/blocks/pages/ index/ index.bemjson.js ...GNUmakefile
Структура проекта
Wednesday, October 5, 2011
![Page 26: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/26.jpg)
26
bem-bl/blocks/pages/GNUmakefile
Структура проекта
Wednesday, October 5, 2011
![Page 27: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/27.jpg)
Пишем код
27
Wednesday, October 5, 2011
![Page 28: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/28.jpg)
Основные элементы блока
28
<div class=”b-cut”> <a class=”b-link b-link_pseudo_yes b-cut__opener i-bem” onclick=”return {"b-link":{}}”> ... </a> <div class=”b-cut__content”> ... </div></div>
Wednesday, October 5, 2011
![Page 29: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/29.jpg)
Начальное состояние
29
<div class=”b-cut”> <a class=”b-link b-link_pseudo_yes b-cut__opener i-bem” onclick=”return {"b-link":{}}”> ... </a> <div class=”b-cut__content”> ... </div></div>
Wednesday, October 5, 2011
![Page 30: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/30.jpg)
Открытый кат
30
<div class=”b-cut”> <a class=”b-link b-link_pseudo_yes b-cut__opener b-cut__opener_visibility_hidden i-bem” onclick=”return {"b-link":{}}”> ... </a> <div class=”b-cut__content b-cut__opener_visibility_visible”> ... </div></div>
Wednesday, October 5, 2011
![Page 31: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/31.jpg)
Контейнер блока
31
<div class=”b-cut”> ...</div>
Wednesday, October 5, 2011
![Page 32: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/32.jpg)
js: true
32
<div class=”b-cut i-bem” onclick=”return {"b-cut":{}}”> ...</div>
Wednesday, October 5, 2011
![Page 33: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/33.jpg)
Пишем код
33
Wednesday, October 5, 2011
![Page 34: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/34.jpg)
Инициализация
34
<div class=”b-cut i-bem b-cut_js_inited” onclick=”return {"b-cut":{}}”> ...</div>
Wednesday, October 5, 2011
![Page 35: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/35.jpg)
Начальное состояние
35
<a class=”b-link b-link_pseudo_yes b-cut__opener i-bem” onclick=”return {"b-link":{}}”> ...</a>
Wednesday, October 5, 2011
![Page 36: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/36.jpg)
Начальное состояние
36
<a class=”b-link b-link_pseudo_yes b-cut__opener i-bem” onclick=”return {"b-link":{}}”> ...</a>
Wednesday, October 5, 2011
![Page 37: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/37.jpg)
Начальное состояние
37
<a class=”b-link b-link_pseudo_yes b-link_js_inited b-cut__opener i-bem” onclick=”return {"b-link":{}}”> ...</a>
Wednesday, October 5, 2011
![Page 38: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/38.jpg)
Пишем код
38
Wednesday, October 5, 2011
![Page 39: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/39.jpg)
Как закрывать кат?
39
<div class=”b-cut”> ... <div class=”b-cut__content b-cut__opener_visibility_visible”> <i class=”b-cut__close”></i> ... </div></div>
Wednesday, October 5, 2011
![Page 40: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/40.jpg)
Пишем код
40
Wednesday, October 5, 2011
![Page 41: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/41.jpg)
Очередной проект
41
Wednesday, October 5, 2011
![Page 42: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/42.jpg)
Инициализация проекта
42
Клонируем репозиторий
git://github.com/toivonen/yac2011-bem-js-blog.git
make
Получает библиотеку bem-bl
Собирает страницы
Wednesday, October 5, 2011
![Page 43: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/43.jpg)
Пишем код
43
Wednesday, October 5, 2011
![Page 44: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/44.jpg)
для “почитать”Ссылки
44
Репозиторий библиотекиgithub.com/bem/bem-bl или clck.ru/Kuu4jsdoc в коде блока i-bem
Документация блока i-bemclck.ru/KzEJ
Клуб в Ярушке
Wednesday, October 5, 2011
![Page 46: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/46.jpg)
Бонус!
46
Wednesday, October 5, 2011
![Page 47: JavaScript в БЭМ терминах](https://reader033.vdocuments.site/reader033/viewer/2022052600/55878cf2d8b42a315d8b45da/html5/thumbnails/47.jpg)
Пишем код
47
Wednesday, October 5, 2011