БЭМ в дикой природе

Эволюционные изменения

HTML — свой BEMXML
CSS — классическая нотация записи CSS-классов,
разбиение на файлы блоков
JS

Пишем HTML по БЭМ — BEMXML

преобразовение БЭМ-дерева в DOM-дерево
управление семантикой узлов
простая система шаблонов
возможность подключать XSLT-шаблоны (но их никто не пишет :)

Достаточно уметь писать XML и знать BEMXML-синтаксис

https://github.com/bivihoba/slcf-compiler

XML

Структура BEMXML-страницы

			<page>
				<project>
					<include href="default-semantic.xml"/>
					<include href="templates.xml"/>
				</project>
				<default-semantic>
					<b:page-title tag="h1"/>
				</default-semantic>
				<templates>
					<p:page-title>Страница не найдена</p:page-title>
					<t:main-content>
						<p:page-title/>
					</t:main-content>
				</templates>
				<page-canvas>
					<p:layout/>
				</page-canvas>
			</page>

Структура BEMXML-страницы

			<page>			
				<project>Подключаем общие файлы 
					<include href="default-semantic.xml"/>
					<include href="templates.xml"/>
				</project>
				<default-semantic>
					<b:page-title tag="h1"/>
				</default-semantic>
				<templates>
					<p:page-title>Страница не найдена</p:page-title>
					<t:main-content>
						<p:page-title/>
					</t:main-content>
				</templates>
				<page-canvas>
					<p:layout/>
				</page-canvas>
			</page>

Структура BEMXML-страницы

				<page>
					<project>
						<include href="default-semantic.xml"/>
						<include href="templates.xml"/>
					</project>
					<default-semantic>			Определяем семантику
						<b:page-title tag="h1"/>
					</default-semantic>
					<templates>
						<p:page-title>Страница не найдена</p:page-title>
						<t:main-content>
							<p:page-title/>
						</t:main-content>
					</templates>
					<page-canvas>
						<p:layout/>
					</page-canvas>
				</page>

Структура BEMXML-страницы

				<page>
					<project>
						<include href="default-semantic.xml"/>
						<include href="templates.xml"/>
					</project>
					<default-semantic>
						<b:page-title tag="h1"/>
					</default-semantic>
					<templates>			Объявляем шаблоны
						<p:page-title>Страница не найдена</p:page-title>
						<t:main-content>
							<p:page-title/>
						</t:main-content>
					</templates>
					<page-canvas>
						<p:layout/>
					</page-canvas>
				</page>

Структура BEMXML-страницы

				<page>
					<project>
						<include href="default-semantic.xml"/>
						<include href="templates.xml"/>
					</project>
					<default-semantic>
						<b:page-title tag="h1"/>
					</default-semantic>
					<templates>
						<p:page-title>Страница не найдена</p:page-title>
						<t:main-content>
							<p:page-title/>
						</t:main-content>
					</templates>
					<page-canvas>	Выводим всё на страницу
						<p:layout/>
					</page-canvas>
				</page>

BEMXML-разметка

		<b:product>
			<m:viewtype val="complete"/>
			<a:article>
				<m:viewtype val="s1"/>
				<m:content val="product"/>
				</a:article>
			<e:details>
				<a:section>
					<m:viewtype val="s1-details"/>
					<m:content val="product-details"/>
					</a:section>
				<e:header block="section">
					<e:title>
						<a:title block-of="article"/>
						<a:page-title/>

Пример побольше

BEMXML-разметка

		<b:product>	Блок
			<m:viewtype val="complete"/>
			<a:article>
				<m:viewtype val="s1"/>
				<m:content val="product"/>
				</a:article>
			<e:details>
				<a:section>
					<m:viewtype val="s1-details"/>
					<m:content val="product-details"/>
					</a:section>
				<e:header block="section">
					<e:title>
						<a:title block-of="article"/>
						<a:page-title/>

Пример побольше

BEMXML-разметка

		<b:product>
			<m:viewtype val="complete"/>
			<a:article>
				<m:viewtype val="s1"/>
				<m:content val="product"/>
				</a:article>
			<e:details>	Элементы блока
				<a:section>
					<m:viewtype val="s1-details"/>
					<m:content val="product-details"/>
					</a:section>
				<e:header block="section">
					<e:title>	
						<a:title block-of="article"/>
						<a:page-title/>

Пример побольше

BEMXML-разметка

		<b:product>
			<m:viewtype val="complete"/>
			<a:article>
				<m:viewtype val="s1"/>
				<m:content val="product"/>
				</a:article>
			<e:details>
				<a:section>
					<m:viewtype val="s1-details"/>
					<m:content val="product-details"/>
					</a:section>
				<e:header block="section">	элементу можно назначить блок вручную
					<e:title>
						<a:title block-of="article"/>
						<a:page-title/>

Пример побольше

BEMXML-разметка

		<b:product>
			<m:viewtype val="complete"/>	Модификация блока
			<a:article>
				<m:viewtype val="s1"/>
				<m:content val="product"/>
				</a:article>
			<e:details>
				<a:section>
					<m:viewtype val="s1-details"/>
					<m:content val="product-details"/>
					</a:section>
				<e:header block="section">
					<e:title>
						<a:title block-of="article"/>
						<a:page-title/>

Пример побольше

BEMXML-разметка

			<b:product>
				<m:viewtype val="complete"/>
				<a:article>	Можно примешать блок
					<m:viewtype val="s1"/>
					<m:content val="product"/>
					</a:article>
				<e:details>
					<a:section>
						<m:viewtype val="s1-details"/>
						<m:content val="product-details"/>
						</a:section>
					<e:header block="section">
						<e:title>
							<a:title block-of="article"/>
							<a:page-title/>

Пример побольше

BEMXML-разметка

			<b:product>
				<m:viewtype val="complete"/>
				<a:article>
					<m:viewtype val="s1"/>
					<m:content val="product"/>
					</a:article>
				<e:details>
					<a:section>
						<m:viewtype val="s1-details"/>
						<m:content val="product-details"/>
						</a:section>
					<e:header block="section">
						<e:title>
							<a:title block-of="article"/>	... или элемент блока
							<a:page-title/>

Пример побольше

BEMXML-разметка

			<b:product>
				<m:viewtype val="complete"/>
				<a:article>
					<m:viewtype val="s1"/>	Можно добавлять модификации
					<m:content val="product"/>
					</a:article>
				<e:details>
					<a:section>
						<m:viewtype val="s1-details"/>	на примешанные блоки
						<m:content val="product-details"/>
						</a:section>
					<e:header block="section">
						<e:title>
							<a:title block-of="article"/>
							<a:page-title/>

Пример побольше

Результаты

Актуальная документация
Ускорение процесса верстки
Быстрое внедрение в работу
Навязывание БЭМ-мышления

Как мы пишем CSS по БЭМ

Каскад
Миксы
Блок vs. модификатор
Сочетание модификаторов
Блоки на файловой системе

Блок + элемент блока

                .b-region .b-region__title {
                    margin-right: 20px;                  
                }

Излишне, такая связь заложена на уровне синтаксиса

Модификатор блока + элемент

                .b-list_type_simple .b-list__item {}

                <ul class="b-list b-list_type_simple">
                  <li class="b-list__item">
                      <ol class="b-list b-list_type_numeric">
                          <li class="b-list__item">

Приемлимо, но могут быть неприятные эффекты

Сущности из разных блоков

                .b-article .b-link {...} /*«межблочный каскад»*/

неприемлимо, но по-разному — зависит от семантики:

                       .b-article .b-link {}
                       .b-pagination .b-link {}

Полегче с миксами!

«узаконенный каскад»
микс != глобальный модификатор

.b-inline {display:inline;}

<h4 class="b-product__title b-inline"/>

Блок должен иметь ценность сам по себе.


            <article class="b-article b-article_content_product
				b-product b-product_type_sale">
                   <header class="b-article__header"/>

                           <h3 class="b-product__title"/>Title</h3>

                   </header>
                   <div class="b-article__content b-product__description">

            .b-product_type_sale .b-product__title {}
            .b-article_content_product .b-article__header {}

Меньше блоков

Вместо трех блоков:

b-span1 b-span2 b-span3

один с модификаторами

b-span_size_1  b-span_size_2 b-span_size_3

Работа с библиотекой блоков

Где же этот ящик...

Больше блоков

плюс сущность

		.b-menu_type_main -> b-main-menu

минус связь

.b-menu_type_main .b-menu__item -> b-main-menu__item

Больше типов. Общие модификаторы

type - ключевые свойства и особенности
layout - раскладка
viewtype - представление
viewtype-theme - тема/скин в пределах выбранного viewtype
content - содержимое
context - контекст

Каскад модификаторов

.b-menu__item
.b-menu__item_state_selected
.b-menu_type_meta. b-menu__item_state_selected
.b-menu_viewtype_ribbon .b-menu__item_state_selected
.b-menu_content_products .b-menu__item_state_selected

Постепенное выделение блоков на файловой системе

.b-button.css
.b-button_state.css
.b-button_state_pressed.css

Результаты

Минимальные затраты на инфраструктуру
Всегда «знакомый» код
Возможность оценивать качество проектирования

У нас есть план

доработка нашей библиотеки блоков
i-bem.js
миграция на bem-tools/enb
...
PROFIT!

Василий Чернов

руководитель группы верстки,
департамент разработки интернет-проектов, Softline

vasiliy.chernov@softline.ru
@bivihoba

cлайды

БЭМ в дикой природе

БЭМ в дикой природе

Среда обитания

Многообразие видов

Естественные враги

Эволюционные изменения

Пишем HTML по БЭМ — BEMXML

XML

Структура BEMXML-страницы

Структура BEMXML-страницы

Структура BEMXML-страницы

Структура BEMXML-страницы

Структура BEMXML-страницы

BEMXML-разметка

BEMXML-разметка

BEMXML-разметка

BEMXML-разметка

BEMXML-разметка

BEMXML-разметка

BEMXML-разметка

BEMXML-разметка

Результаты

Как мы пишем CSS по БЭМ

Блок + элемент блока

Модификатор блока + элемент

Сущности из разных блоков

Полегче с миксами!

Меньше блоков

Работа с библиотекой блоков

Где же этот ящик...

Больше блоков

Больше типов. Общие модификаторы

Каскад модификаторов

Постепенное выделение блоков на файловой системе

Результаты

У нас есть план

Василий Чернов