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

661 views
588 views

Published on

Слайды мастер-класса "JavaScript в БЭМ-терминах" на YAC2011. Варвара Степанова.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
661
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
27
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

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

×