Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Вёрстка по методологии БЭМ

4,000 views

Published on

Слайды доклада о методологии вёрстки "БЭМ", придуманной в компании "Яндекс". Краткое описание методологии, принципов создания качественного css-кода, и применения "БЭМ" в WordPress

Published in: Software
  • Be the first to comment

  • Be the first to like this

Вёрстка по методологии БЭМ

  1. 1. Вёрстка по методологии БЭМ Владимир Скляр, WordPress Moscow Meetup #37, 27.06.2015
  2. 2. HTML + CSS + JS
  3. 3. HTML + CSS+ JS
  4. 4. Если не знакомы с html и css, но интересно htmlbook.ru/samhtml htmlbook.ru/samcss
  5. 5. Особенности CSS Каскад Глобальная область видимости
  6. 6. Специфичность #logo .header .logo .logo h1
  7. 7. «CSS-ад в вакууме» #header div div * { font-size : 15px !important; }
  8. 8. Общие принципы грамотной вёрстки ● Не использовать идентификаторы ● Не использовать универсальный селектор * ● Рекомендуется, использовать только классы ● Минимизировать каскад ● Не использовать !important ● Не использовать html-атрибут style ● Использовать пре(пост)процессоры css ● Минимизировать использование селекторов тегов
  9. 9. БЭМ
  10. 10. БЭМ = Методология + Платформа (Стек)
  11. 11. БЭМ = Методология + Платформа (Стек)
  12. 12. Блок Элемент Модификатор
  13. 13. Блок Независимая структурная единица в вёрстке .logo .main-menu .copyright
  14. 14. Элемент Составляющая часть блока, вне которого она не имеет смысла. .logo__image .main-menu__item .copyright__text
  15. 15. Модификатор Изменённое состояние блока или элемента. .logo__image_big .logo__image_size_big .main-menu__item_state_current .copyright__text_hover .menu_float
  16. 16. Общие принципы грамотной вёрстки ● Не использовать идентификаторы ● Не использовать универсальный селектор * ● Рекомендуется, использовать только классы ● Минимизировать каскад ● Не использовать !important ● Не использовать html-атрибут style ● Использовать пре(пост)процессоры css ● Минимизировать использование селекторов тегов
  17. 17. <ul class="menu"> <li class="menu__item"> <a href="menu__link">Page 1</a> </li> <li class="menu__item menu__item_current"> <a href="menu__link">Page 2</a> </li> </ul>
  18. 18. <ul class="price-table"> <li class="price-table__item"> <div class="price-table__item-header">111</div> <div class="price-table__item-content">222</div> </li> <li class="price-table__item price-table__item_sale"> <div class="price-table__item-header">333</div> <div class="price-table__item-content">444</div> </li> </ul>
  19. 19. Плюсы
  20. 20. Минусы ● Возможная громоздкость (см. БЭМ-стек) – длинные имена классов – большие иерархии папок/файлов ● неконтролируемый html (wysiwyg)
  21. 21. 5 bem.info
  22. 22. github.com/bem
  23. 23. Меню wp_nav_menu – параметр «walker» класс Walker_Nav_Menu→
  24. 24. Виджеты widget_options параметр «classname»→
  25. 25. Вывод списка категорий wp_list_categories – параметр «walker» класс Walker_Category→
  26. 26. Вывод списка страниц wp_list_pages – параметр «walker» класс Walker_Page→
  27. 27. Другое body_class( 'site-body' ) post_class( 'posts-list__item' ) изменение вывода стандартных шорткодов, например [gallery] – фильтр post_gallery
  28. 28. Где искать информацию bem.info youtube.com — Фронтенд habrahabr google
  29. 29. В продолжение темы Вадим Макеев, «БЭМ - норм» http://www.youtube.com/watch?v=RM55tkWfHDc
  30. 30. «Вёрстка по методологии БЭМ» Владимир Скляр (versus.post@gmail.com), WordPress Moscow Meetup #37, 27.06.2015

×