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

1. Вёрстка по методологии
БЭМ
Владимир Скляр, WordPress Moscow Meetup #37, 27.06.2015

2. HTML + CSS + JS

3. HTML + CSS+ JS

4. Если не знакомы с html и css, но интересно
htmlbook.ru/samhtml
htmlbook.ru/samcss

5. Особенности CSS
Каскад
Глобальная область видимости

6. Специфичность
#logo
.header .logo
.logo
h1

7. «CSS-ад в вакууме»
#header div div * {
font-size : 15px !important;
}

9. Общие принципы грамотной вёрстки
● Не использовать идентификаторы
● Не использовать универсальный селектор *
● Рекомендуется, использовать только классы
● Минимизировать каскад
● Не использовать !important
● Не использовать html-атрибут style
● Использовать пре(пост)процессоры css
● Минимизировать использование селекторов тегов

10. БЭМ

12. БЭМ
=
Методология + Платформа (Стек)

13. БЭМ
=
Методология + Платформа (Стек)

14. Блок
Элемент
Модификатор

15. Блок
Независимая структурная единица в вёрстке
.logo
.main-menu
.copyright

16. Элемент
Составляющая часть блока, вне которого она не имеет
смысла.
.logo__image
.main-menu__item
.copyright__text

17. Модификатор
Изменённое состояние блока или элемента.
.logo__image_big
.logo__image_size_big
.main-menu__item_state_current
.copyright__text_hover
.menu_float

18. Общие принципы грамотной вёрстки
● Не использовать идентификаторы
● Не использовать универсальный селектор *
● Рекомендуется, использовать только классы
● Минимизировать каскад
● Не использовать !important
● Не использовать html-атрибут style
● Использовать пре(пост)процессоры css
● Минимизировать использование селекторов тегов

19. <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>

20. <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>

21. Плюсы

22. Минусы
● Возможная громоздкость (см. БЭМ-стек)
– длинные имена классов
– большие иерархии папок/файлов
● неконтролируемый html (wysiwyg)

23. 5
bem.info

24. github.com/bem

27. Меню
wp_nav_menu
– параметр «walker» класс Walker_Nav_Menu→

28. Виджеты
widget_options параметр «classname»→

29. Вывод списка категорий
wp_list_categories
– параметр «walker» класс Walker_Category→

30. Вывод списка страниц
wp_list_pages
– параметр «walker» класс Walker_Page→

31. Другое
body_class( 'site-body' )
post_class( 'posts-list__item' )
изменение вывода стандартных шорткодов,
например [gallery]
– фильтр post_gallery

32. Где искать информацию
bem.info
youtube.com — Фронтенд
habrahabr
google

33. В продолжение темы
Вадим Макеев, «БЭМ - норм»
http://www.youtube.com/watch?v=RM55tkWfHDc

34. «Вёрстка по методологии БЭМ»
Владимир Скляр (versus.post@gmail.com),
WordPress Moscow Meetup #37, 27.06.2015