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

БЭМ

Владимир Скляр, WordPress Moscow Meetup #37, 27.06.2015

HTML + CSS + JS

HTML + CSS + JS

Если не знакомы с html и css, но интересно

htmlbook.ru/samhtml

htmlbook.ru/samcss

Особенности CSS

Каскад

Глобальная область видимости

Специфичность

#logo

.header .logo

.logo

h1

«CSS-ад в вакууме»

#header div div * {font-size : 15px !important;

}

Общие принципы грамотной вёрстки

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

БЭМ

БЭМ=

Методология + Платформа (Стек)

БЭМ=

Методология + Платформа (Стек)

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

Блок

Независимая структурная единица в вёрстке

.logo

.main-menu

.copyright

Элемент

Составляющая часть блока, вне которого она не имеет смысла.

.logo__image

.main-menu__item

.copyright__text

Модификатор

Изменённое состояние блока или элемента.

.logo__image_big

.logo__image_size_big

.main-menu__item_state_current

.copyright__text_hover

.menu_float

Общие принципы грамотной вёрстки

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

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

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

Плюсы

Минусы

● Возможная громоздкость (см. БЭМ-стек)– длинные имена классов

– большие иерархии папок/файлов

● неконтролируемый html (wysiwyg)

5

bem.info

github.com/bem

Меню

wp_nav_menu– параметр «walker» класс Walker_Nav_Menu→

Виджеты

widget_options параметр «classname»→

Вывод списка категорий

wp_list_categories– параметр «walker» класс Walker_Category→

Вывод списка страниц

wp_list_pages– параметр «walker» класс Walker_Page→

Другое

body_class( 'site-body' )

post_class( 'posts-list__item' )

изменение вывода стандартных шорткодов,

например [gallery]– фильтр post_gallery

Где искать информацию

bem.info

youtube.com — Фронтенд

habrahabr

google

В продолжение темы

Вадим Макеев, «БЭМ - норм»

http://www.youtube.com/watch?v=RM55tkWfHDc

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

Владимир Скляр (versus.post@gmail.com),

WordPress Moscow Meetup #37, 27.06.2015