бэм! в.харисов, с. бережной. зал 2

936 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
936
On SlideShare
0
From Embeds
0
Number of Embeds
88
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

бэм! в.харисов, с. бережной. зал 2

  1. 1. БЭМ!Виталий ХарисовСергей БережнойРИТ++, Москва, 26 апреля 2011 года
  2. 2. БЭМ-методология
  3. 3. Методологияучение об организации деятельностиmethodolog.ru
  4. 4. Пример реализацииb-head-logo
  5. 5. <div class="b-head-logo"> <img class="b-head-logo__logo" src="URL" alt="Яндекс"/></div>
  6. 6. <div class="b-head-logo"> <img class="b-head-logo__logo" src="URL" alt="Яндекс"/></div>
  7. 7. <div class="b-head-logo"> <img class="b-head-logo__logo" src="URL" alt="Яндекс"/></div>
  8. 8. <div class="b-head-logo"> <img class="b-head-logo__logo" src="URL" alt="Яндекс"/></div>
  9. 9. <div class="b-head-logo"> <img class="b-head-logo__logo"/> <div class="b-head-logo__name"> картинки </div></div>
  10. 10. <div class="b-head-logo"> <img class="b-head-logo__logo"/> <div class="b-head-logo__name"> картинки </div></div>
  11. 11. <div class="b-head-logo"> <img class="b-head-logo__logo"/> <div class="b-head-logo__name"> картинки </div> <i class="b-head-logo__nda"/></div>
  12. 12. <div class="b-head-logo b-head-logo_size_big"> <img class="b-head-logo__logo"/></div>
  13. 13. <div class="b-head-logo b-head-logo_size_big"> <img class="b-head-logo__logo"/></div>
  14. 14. <div class="b-head-logo b-head-logo_size_big"> <img class="b-head-logo__logo"/></div>
  15. 15. <div class="b-head-logo b-head-logo_size_big"> <img class="b-head-logo__logo"/></div>
  16. 16. Файловая структура
  17. 17. blocks/ b-head-logo/ …
  18. 18. blocks/ b-head-logo/ b-head-logo.css
  19. 19. blocks/ b-head-logo/ b-head-logo.css b-head-logo.png
  20. 20. blocks/ b-head-logo/ b-head-logo.css b-head-logo.png
  21. 21. b-head-logo.css.b-head-logo{ margin: auto; text-align: center;}
  22. 22. blocks/ b-head-logo/ __logo/ … b-head-logo.css b-head-logo.png
  23. 23. blocks/ b-head-logo/ __logo/ b-head-logo__logo.css b-head-logo.css b-head-logo.png
  24. 24. blocks/ b-head-logo/ __logo/ b-head-logo__logo.css __name/ b-head-logo__name.css b-head-logo.css b-head-logo.png
  25. 25. b-head-logo__logo.css.b-head-logo__logo{ padding: 1.1em 0 0.47em;}
  26. 26. blocks/ b-head-logo/ _size/ …
  27. 27. blocks/ b-head-logo/ _size/ b-head-logo_size_big.css
  28. 28. blocks/ b-head-logo/ _size/ b-head-logo_size_big.css
  29. 29. blocks/ b-head-logo/ _size/ b-head-logo_size_big.css
  30. 30. b-head-logo_size_big.css.b-head-logo_size_big{ …}
  31. 31. БЭМ-инструментыgithub.com/bem/bem-tools
  32. 32. blocks/ b-head-logo/ …> bem create level blocks-intranet
  33. 33. blocks/ b-head-logo/ …blocks-intranet/ …
  34. 34. blocks/ b-head-logo/ …blocks-intranet/> bem create block -t css b-head-logo
  35. 35. blocks/ b-head-logo/ …blocks-intranet/ b-head-logo/ b-head-logo.css
  36. 36. blocks/ b-head-logo/ …blocks-intranet/> bem create elem -b b-head-logo -t css nda
  37. 37. blocks/ b-head-logo/ …blocks-intranet/ b-head-logo/ __nda/ b-head-logo__nda.css b-head-logo.css
  38. 38. > bem build -l blocks -l blocks-intranet -t css …
  39. 39. @import url(blocks/b-head-logo/ b-head-logo.css);@import url(blocks/b-head-logo __name/b-head-logo__name.css);…@import url(blocks-intranet/ b-head-logo/b-head-logo.css);…
  40. 40. @import url(blocks/b-head-logo/ b-head-logo.css);@import url(blocks/b-head-logo __name/b-head-logo__name.css);…@import url(blocks-intranet/ b-head-logo/b-head-logo.css);…
  41. 41. @import url(blocks/b-head-logo/ b-head-logo.css);@import url(blocks/b-head-logo __name/b-head-logo__name.css);…@import url(blocks-intranet/ b-head-logo/b-head-logo.css);…
  42. 42. БЭМ!
  43. 43. Разделение кода на части
  44. 44. Специализация людей
  45. 45. Ссылки
  46. 46. — БЭМ-методология github.com/bem/bem-method
  47. 47. — БЭМ-методология github.com/bem/bem-method— Инструменты github.com/bem/bem-tools
  48. 48. — БЭМ-методология github.com/bem/bem-method— Инструменты github.com/bem/bem-tools— Библиотека блоков github.com/bem/bem-bl
  49. 49. — БЭМ-методология github.com/bem/bem-method— Инструменты github.com/bem/bem-tools— Библиотека блоков github.com/bem/bem-bl— Клуб для обсуждения clubs.ya.ru/bem
  50. 50. Виталий Харисовvitaly@yandex-team.ruСергей Бережнойveged@yandex-team.ru

×