JavaScript в БЭМ терминах

YAC-2011, Москва, 19 сентября 2011 года

Варвара Степанова

JavaScript в БЭМ-терминах

Wednesday, October 5, 2011

clck.ru/L45Cшпаргалка к мастер-классу

JavaScript в терминах БЭМ


http://clck.ru/L45C

http://clck.ru/L45C

Блоки и элементы

3


Модификаторы

4


Уровни переопределения

5


Составные блоки

6


JS-реализация блока i-bem

7


Некоторые особенностиFeatures

8



9

Декларативный стиль



10


Отложенная инициализация



11



Использование вложенных блоков



12




Реакция на изменение модификаторов



13




Реакция на изменение модификаторов

Расширение поведения модификаторами и уровнями переопределения


Что будем делать?

14


b-cutБлок-cut

15


b-cutБлок-cut

16


Инструменты и окружение

17


Инструменты и окружение

18

Локальный web-сервер

БЭМ-инструменты

github.com/bem/bem-tools

или clck.ru/Kz8v


https://github.com/bem/bem-tools




Инициализация проекта

19



20

Клонируем репозиторий

git://github.com/toivonen/yac2011-bem-js-docs.git

make

Получает библиотеку bem-bl

Собирает страницы


Структура проекта

21

bem-bl/blocks/pages/GNUmakefile


22

bem-bl/ blocks-common/ blocks-desktop/blocks/pages/GNUmakefile



23

bem-bl/ blocks-common/ i-bem/ ... blocks-desktop/blocks/pages/GNUmakefile



24

bem-bl/blocks/ b-cut/ ...pages/GNUmakefile



25

bem-bl/blocks/pages/ index/ index.bemjson.js ...GNUmakefile



26

bem-bl/blocks/pages/GNUmakefile



Пишем код

27


Основные элементы блока

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>


Начальное состояние

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>


Открытый кат

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>


Контейнер блока

31

<div class=”b-cut”> ...</div>


js: true

32

<div class=”b-cut i-bem” onclick=”return {"b-cut":{}}”> ...</div>


Пишем код

33


Инициализация

34

<div class=”b-cut i-bem b-cut_js_inited” onclick=”return {"b-cut":{}}”> ...</div>



35

<a class=”b-link b-link_pseudo_yes b-cut__opener i-bem” onclick=”return {"b-link":{}}”> ...</a>



36

<a class=”b-link b-link_pseudo_yes b-cut__opener i-bem” onclick=”return {"b-link":{}}”> ...</a>



37

<a class=”b-link b-link_pseudo_yes b-link_js_inited b-cut__opener i-bem” onclick=”return {"b-link":{}}”> ...</a>


Пишем код

38


Как закрывать кат?

39

<div class=”b-cut”> ... <div class=”b-cut__content b-cut__opener_visibility_visible”> <i class=”b-cut__close”></i> ... </div></div>


Пишем код

40


Очередной проект

41



42

Клонируем репозиторий

git://github.com/toivonen/yac2011-bem-js-blog.git

make

Получает библиотеку bem-bl

Собирает страницы


Пишем код

43


для “почитать”Ссылки

44

Репозиторий библиотекиgithub.com/bem/bem-bl или clck.ru/Kuu4jsdoc в коде блока i-bem

Документация блока i-bemclck.ru/KzEJ

Клуб в Ярушке


https://github.com/bem/bem-bl%20

https://github.com/bem/bem-bl%20

http://clck.ru/KzEJ

http://clck.ru/KzEJ

Bарвара Степанова[email protected]


mailto:toivonenyandex-team.ru?subject=

mailto:toivonenyandex-team.ru?subject=

Бонус!

46


Пишем код

47


JavaScript в БЭМ терминах

Technology

Transcript of JavaScript в БЭМ терминах