SlideShare a Scribd company logo
БЭМ в дикой природе
Василий Чернов

01
Среда обитания
1. Атмосфера:
внутренние проекты и заказная разработка, Agile
2. География:
Москва, Оренбург, Новосибирск, Воронеж, Красноярск, Таганрог
3. Внешние факторы:
PHP, .NET, Java, 1С-Битрикс, Microsoft SharePoint

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

03
Естественные враги
1. устаревание документации
2. географическая распределенность
3. сложность совместной работы
4. непереносимость решений
5. PHP :(

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

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

Достаточно уметь писать XML и знать BEMXML-синтаксис
https://github.com/bivihoba/slcf-compiler
06
XML
Структура BEMXML-страницы
01. <page>
02.
<project>
03.
<include href="default-semantic.xml"/>
04.
<include href="templates.xml"/>
05.
</project>
06.
<default-semantic>
07.
<b:page-title tag="h1"/>
08.
</default-semantic>
09.
<templates>
10.
<p:page-title>Страница не найдена</p:page-title>
11.
<t:main-content>
12.
<p:page-title/>
13.
</t:main-content>
14.
</templates>
15.
<page-canvas>
16.
<p:layout/>
17.
</page-canvas>
18. </page>
Структура BEMXML-страницы
01. <page>
Подключаем общие файлы
02.
<project>
03.
<include href="default-semantic.xml"/>
04.
<include href="templates.xml"/>
05.
</project>
06.
<default-semantic>
07.
<b:page-title tag="h1"/>
08.
</default-semantic>
09.
<templates>
10.
<p:page-title>Страница не найдена</p:page-title>
11.
<t:main-content>
12.
<p:page-title/>
13.
</t:main-content>
14.
</templates>
15.
<page-canvas>
16.
<p:layout/>
17.
</page-canvas>
18. </page>
Структура BEMXML-страницы
01. <page>
02.
<project>
03.
<include href="default-semantic.xml"/>
04.
<include href="templates.xml"/>
05.
</project>
Определяем семантику
06.
<default-semantic>
07.
<b:page-title tag="h1"/>
08.
</default-semantic>
09.
<templates>
10.
<p:page-title>Страница не найдена</p:page-title>
11.
<t:main-content>
12.
<p:page-title/>
13.
</t:main-content>
14.
</templates>
15.
<page-canvas>
16.
<p:layout/>
17.
</page-canvas>
18. </page>
Структура BEMXML-страницы
01. <page>
02.
<project>
03.
<include href="default-semantic.xml"/>
04.
<include href="templates.xml"/>
05.
</project>
06.
<default-semantic>
07.
<b:page-title tag="h1"/>
08.
</default-semantic>
Объявляем шаблоны
09.
<templates>
10.
<p:page-title>Страница не найдена</p:page-title>
11.
<t:main-content>
12.
<p:page-title/>
13.
</t:main-content>
14.
</templates>
15.
<page-canvas>
16.
<p:layout/>
17.
</page-canvas>
18. </page>
Структура BEMXML-страницы
01. <page>
02.
<project>
03.
<include href="default-semantic.xml"/>
04.
<include href="templates.xml"/>
05.
</project>
06.
<default-semantic>
07.
<b:page-title tag="h1"/>
08.
</default-semantic>
09.
<templates>
10.
<p:page-title>Страница не найдена</p:page-title>
11.
<t:main-content>
12.
<p:page-title/>
13.
</t:main-content>
14.
</templates>
Выводим всё на страницу
15.
<page-canvas>
16.
<p:layout/>
17.
</page-canvas>
18. </page>
BEMXML-разметка
01. <b:product>
02.
<m:viewtype val="complete"/>
03.
<a:article>
04.
<m:viewtype val="s1"/>
05.
<m:content val="product"/>
06.
</a:article>
07.
<e:details>
08.
<a:section>
09.
<m:viewtype val="s1-details"/>
10.
<m:content val="product-details"/>
11.
</a:section>
12.
<e:header block="section">
13.
<e:title>
14.
<a:title block-of="article"/>
15.
<a:page-title/>
BEMXML-разметка
Блок
01. <b:product>
02.
<m:viewtype val="complete"/>
03.
<a:article>
04.
<m:viewtype val="s1"/>
05.
<m:content val="product"/>
06.
</a:article>
07.
<e:details>
08.
<a:section>
09.
<m:viewtype val="s1-details"/>
10.
<m:content val="product-details"/>
11.
</a:section>
12.
<e:header block="section">
13.
<e:title>
14.
<a:title block-of="article"/>
15.
<a:page-title/>
BEMXML-разметка
01. <b:product>
02.
<m:viewtype val="complete"/>
03.
<a:article>
04.
<m:viewtype val="s1"/>
05.
<m:content val="product"/>
06.
</a:article>
07.
<e:details>
08.
<a:section>
09.
<m:viewtype val="s1-details"/>
10.
<m:content val="product-details"/>
11.
</a:section>
12.
<e:header block="section">
13.
<e:title>
14.
<a:title block-of="article"/>
15.
<a:page-title/>

Элементы блока
BEMXML-разметка
01. <b:product>
02.
<m:viewtype val="complete"/>
03.
<a:article>
04.
<m:viewtype val="s1"/>
05.
<m:content val="product"/>
06.
</a:article>
07.
<e:details>
08.
<a:section>
09.
<m:viewtype val="s1-details"/>
10.
<m:content val="product-details"/>
11.
</a:section>
элементу можно назначить блок вручную
12.
<e:header block="section">
13.
<e:title>
14.
<a:title block-of="article"/>
15.
<a:page-title/>
BEMXML-разметка
01. <b:product>
02.
<m:viewtype val="complete"/>
03.
<a:article>
04.
<m:viewtype val="s1"/>
05.
<m:content val="product"/>
06.
</a:article>
07.
<e:details>
08.
<a:section>
09.
<m:viewtype val="s1-details"/>
10.
<m:content val="product-details"/>
11.
</a:section>
12.
<e:header block="section">
13.
<e:title>
14.
<a:title block-of="article"/>
15.
<a:page-title/>

Модификация блока
BEMXML-разметка
01. <b:product>
02.
<m:viewtype val="complete"/>
Можно примешать блок
03.
<a:article>
04.
<m:viewtype val="s1"/>
05.
<m:content val="product"/>
06.
</a:article>
07.
<e:details>
08.
<a:section>
09.
<m:viewtype val="s1-details"/>
10.
<m:content val="product-details"/>
11.
</a:section>
12.
<e:header block="section">
13.
<e:title>
14.
<a:title block-of="article"/>
15.
<a:page-title/>
BEMXML-разметка
01. <b:product>
02.
<m:viewtype val="complete"/>
03.
<a:article>
04.
<m:viewtype val="s1"/>
05.
<m:content val="product"/>
06.
</a:article>
07.
<e:details>
08.
<a:section>
09.
<m:viewtype val="s1-details"/>
10.
<m:content val="product-details"/>
11.
</a:section>
12.
<e:header block="section">
13.
<e:title>
14.
<a:title block-of="article"/>
15.
<a:page-title/>

... или элемент блока
BEMXML-разметка
01. <b:product>
02.
<m:viewtype val="complete"/>
03.
<a:article>
Можно добавлять модификации
04.
<m:viewtype val="s1"/>
05.
<m:content val="product"/>
06.
</a:article>
07.
<e:details>
08.
<a:section>
на примешанные блоки
09.
<m:viewtype val="s1-details"/>
10.
<m:content val="product-details"/>
11.
</a:section>
12.
<e:header block="section">
13.
<e:title>
14.
<a:title block-of="article"/>
15.
<a:page-title/>
Результаты
• Актуальная документация
• Ускорение процесса верстки
• Быстрое внедрение в работу
• Навязывание БЭМ-мышления

08
Как мы пишем CSS по БЭМ
• Каскад
• Миксы
• Блок vs. модификатор
• Сочетание модификаторов
• Блоки на файловой системе

09
Блок + элемент блока
01. .b-region
02.

.b-region __title {

margin-right: 20px;

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

10
Модификатор блока + элемент
.b-list_type_simple .b-list__item {}
01. <ul class="b-list b-list_type_simple">
02.

<li class=" b-list__item ">

03.

<ol class="b-list b-list_type_numeric">

04.

<li class=" b-list__item ">
Приемлимо, но могут быть неприятные эффекты
11
Сущности из разных блоков
.b-article .b-link {...} /* «межблочный каскад» */
неприемлимо, но по-разному — зависит от семантики:

01.

.b-article .b-link {}

02.

.b-pagination .b-link {}

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

.b-inline {display:inline;}
<h4 class="b-product__title b-inline "/>
Блок должен иметь ценность сам по себе.
13
01. <article class=" b-article
b-product
02.

b-article_content_product
b-product_type_sale ">

<header class=" b-article__header "/>

03.

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

04.

</header>

05.

<div class=" b-article__content

b-product__descriptio

01. .b-product_type_sale .b-product__title {}
02. .b-article_content_product .b-article__header {}
14
15
16
Меньше блоков
Вместо трех блоков:
b-span1

b-span2

b-span3

один с модификаторами
b-span_ size_1

17

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

20
Больше типов. Общие модификаторы
• type - ключевые свойства и особенности
• layout - раскладка
• viewtype - представление
• viewtype-theme - тема/скин в пределах выбранного viewtype
• content - содержимое
• context - контекст

21
Каскад модификаторов
• .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

22
Постепенное выделение блоков
на файловой системе
• .b-button.css
• .b-button_state.css
• .b-button_state_pressed.css

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

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

25
Василий Чернов
руководитель группы верстки,
департамент разработки интернет-проектов, Softline
vasiliy.chernov@softline.ru
@bivihoba

cлайды

More Related Content

Viewers also liked

Infantillllll
InfantillllllInfantillllll
Infantillllll
esclavasfatima
 
Марат Дулин — ENB — сборщик проектов на БЭМ
Марат Дулин — ENB — сборщик проектов на БЭММарат Дулин — ENB — сборщик проектов на БЭМ
Марат Дулин — ENB — сборщик проектов на БЭМ
Yandex
 
Presentación1 gladys guayama
Presentación1 gladys guayamaPresentación1 gladys guayama
Presentación1 gladys guayama
Uquillas64
 
Recepta de les notícies
Recepta de les notíciesRecepta de les notícies
Recepta de les notícies
Txell3
 
Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)
Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)
Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)
Yandex
 
Сергей Максимов — Приложение Todo MVC с помощью bem-mvc
Сергей Максимов — Приложение Todo MVC с помощью bem-mvcСергей Максимов — Приложение Todo MVC с помощью bem-mvc
Сергей Максимов — Приложение Todo MVC с помощью bem-mvc
Yandex
 
Сергей Максимов — BEMTREE — генерируй дерево
Сергей Максимов — BEMTREE — генерируй деревоСергей Максимов — BEMTREE — генерируй дерево
Сергей Максимов — BEMTREE — генерируй дерево
Yandex
 
Сергей Пузанков — Новый Поиск по блогам на bem-node
Сергей Пузанков — Новый Поиск по блогам на bem-nodeСергей Пузанков — Новый Поиск по блогам на bem-node
Сергей Пузанков — Новый Поиск по блогам на bem-node
Yandex
 
Елена Джетпыспаева — БЭМ-сообщество
Елена Джетпыспаева — БЭМ-сообществоЕлена Джетпыспаева — БЭМ-сообщество
Елена Джетпыспаева — БЭМ-сообщество
Yandex
 
3 grechnikov
3 grechnikov3 grechnikov
3 grechnikov
Yandex
 
Imbabura
ImbaburaImbabura
Imbabura
prcpaul
 
Evgeny Kuznetsov – a Russian diver
Evgeny Kuznetsov – a Russian diverEvgeny Kuznetsov – a Russian diver
Evgeny Kuznetsov – a Russian diver
prosvsports
 
Poppy dps analysis 2
Poppy dps analysis 2Poppy dps analysis 2
Poppy dps analysis 2
Charis Creber
 
Situación de Guatemala en materia de intercambio de información tributaria / ...
Situación de Guatemala en materia de intercambio de información tributaria / ...Situación de Guatemala en materia de intercambio de información tributaria / ...
Situación de Guatemala en materia de intercambio de información tributaria / ...
EUROsociAL II
 
2 cooper
2 cooper2 cooper
2 cooper
Yandex
 
3 leonidov
3 leonidov3 leonidov
3 leonidov
Yandex
 
Influence of froebel ideas in education
Influence of froebel ideas in educationInfluence of froebel ideas in education
Influence of froebel ideas in education
Buja Makulu
 
1 dorogovtsev
1 dorogovtsev1 dorogovtsev
1 dorogovtsev
Yandex
 
Desain laporan pada java dengan ireport & jcreator
Desain laporan pada java dengan ireport & jcreatorDesain laporan pada java dengan ireport & jcreator
Desain laporan pada java dengan ireport & jcreator
Agung Sulistyanto
 

Viewers also liked (20)

Infantillllll
InfantillllllInfantillllll
Infantillllll
 
Марат Дулин — ENB — сборщик проектов на БЭМ
Марат Дулин — ENB — сборщик проектов на БЭММарат Дулин — ENB — сборщик проектов на БЭМ
Марат Дулин — ENB — сборщик проектов на БЭМ
 
Presentación1 gladys guayama
Presentación1 gladys guayamaPresentación1 gladys guayama
Presentación1 gladys guayama
 
Recepta de les notícies
Recepta de les notíciesRecepta de les notícies
Recepta de les notícies
 
Dongeng
DongengDongeng
Dongeng
 
Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)
Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)
Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)
 
Сергей Максимов — Приложение Todo MVC с помощью bem-mvc
Сергей Максимов — Приложение Todo MVC с помощью bem-mvcСергей Максимов — Приложение Todo MVC с помощью bem-mvc
Сергей Максимов — Приложение Todo MVC с помощью bem-mvc
 
Сергей Максимов — BEMTREE — генерируй дерево
Сергей Максимов — BEMTREE — генерируй деревоСергей Максимов — BEMTREE — генерируй дерево
Сергей Максимов — BEMTREE — генерируй дерево
 
Сергей Пузанков — Новый Поиск по блогам на bem-node
Сергей Пузанков — Новый Поиск по блогам на bem-nodeСергей Пузанков — Новый Поиск по блогам на bem-node
Сергей Пузанков — Новый Поиск по блогам на bem-node
 
Елена Джетпыспаева — БЭМ-сообщество
Елена Джетпыспаева — БЭМ-сообществоЕлена Джетпыспаева — БЭМ-сообщество
Елена Джетпыспаева — БЭМ-сообщество
 
3 grechnikov
3 grechnikov3 grechnikov
3 grechnikov
 
Imbabura
ImbaburaImbabura
Imbabura
 
Evgeny Kuznetsov – a Russian diver
Evgeny Kuznetsov – a Russian diverEvgeny Kuznetsov – a Russian diver
Evgeny Kuznetsov – a Russian diver
 
Poppy dps analysis 2
Poppy dps analysis 2Poppy dps analysis 2
Poppy dps analysis 2
 
Situación de Guatemala en materia de intercambio de información tributaria / ...
Situación de Guatemala en materia de intercambio de información tributaria / ...Situación de Guatemala en materia de intercambio de información tributaria / ...
Situación de Guatemala en materia de intercambio de información tributaria / ...
 
2 cooper
2 cooper2 cooper
2 cooper
 
3 leonidov
3 leonidov3 leonidov
3 leonidov
 
Influence of froebel ideas in education
Influence of froebel ideas in educationInfluence of froebel ideas in education
Influence of froebel ideas in education
 
1 dorogovtsev
1 dorogovtsev1 dorogovtsev
1 dorogovtsev
 
Desain laporan pada java dengan ireport & jcreator
Desain laporan pada java dengan ireport & jcreatorDesain laporan pada java dengan ireport & jcreator
Desain laporan pada java dengan ireport & jcreator
 

Similar to Василий Чернов — БЭМ в дикой природе

Components now! (in russian)
Components now! (in russian)Components now! (in russian)
Components now! (in russian)
Mikhail Davydov
 
BEM на корпоративном веб-ресурсе — отказоустойчивость фронтенда
BEM на корпоративном веб-ресурсе — отказоустойчивость фронтендаBEM на корпоративном веб-ресурсе — отказоустойчивость фронтенда
BEM на корпоративном веб-ресурсе — отказоустойчивость фронтенда
DALEE digital agency
 
BEM for corporate sites — failover frontend
BEM for corporate sites — failover frontendBEM for corporate sites — failover frontend
BEM for corporate sites — failover frontend
Alex Yaroshevich
 
BEM — block, element, modification conception
BEM — block, element, modification conceptionBEM — block, element, modification conception
BEM — block, element, modification conception
Vadim Patsev
 
Методологии верстки
Методологии версткиМетодологии верстки
Методологии верстки
Elizaveta Selivanova
 
Александр Баумгертнер — Преимущества БЭМ для небольших проектов и компаний
Александр Баумгертнер — Преимущества БЭМ для небольших проектов и компанийАлександр Баумгертнер — Преимущества БЭМ для небольших проектов и компаний
Александр Баумгертнер — Преимущества БЭМ для небольших проектов и компаний
Yandex
 
Alex baumgertner bem_in_small_projects
Alex baumgertner bem_in_small_projectsAlex baumgertner bem_in_small_projects
Alex baumgertner bem_in_small_projects
Alexander Baumgertner
 
SECON'2016. Сергей Аверин. Javascript-фреймворки:
 должен остаться только один
SECON'2016. Сергей Аверин. Javascript-фреймворки:
 должен остаться только одинSECON'2016. Сергей Аверин. Javascript-фреймворки:
 должен остаться только один
SECON'2016. Сергей Аверин. Javascript-фреймворки:
 должен остаться только один
SECON
 
SECON'2016. Аверин Сергей, Javascript-фреймворки:
 должен остаться только один
SECON'2016. Аверин Сергей, Javascript-фреймворки:
 должен остаться только одинSECON'2016. Аверин Сергей, Javascript-фреймворки:
 должен остаться только один
SECON'2016. Аверин Сергей, Javascript-фреймворки:
 должен остаться только один
SECON
 
Сергей Бережной — bem-core v1.0.0
Сергей Бережной — bem-core v1.0.0Сергей Бережной — bem-core v1.0.0
Сергей Бережной — bem-core v1.0.0
Yandex
 
A вы верите в систематизацию
A вы верите в систематизацию A вы верите в систематизацию
A вы верите в систематизацию
Irina Levina
 
Bitrix24 (DevConf)
Bitrix24 (DevConf)Bitrix24 (DevConf)
Bitrix24 (DevConf)
Alexander Demidov
 
«Битрикс24»: архитектура и эксплуатация высоконагруженного облачного сервиса
«Битрикс24»: архитектура и эксплуатация высоконагруженного облачного сервиса«Битрикс24»: архитектура и эксплуатация высоконагруженного облачного сервиса
«Битрикс24»: архитектура и эксплуатация высоконагруженного облачного сервиса
IT Weekend
 
Максим Ширшин "Яндекс.Панель: осваиваем 250px"
Максим Ширшин "Яндекс.Панель: осваиваем 250px"Максим Ширшин "Яндекс.Панель: осваиваем 250px"
Максим Ширшин "Яндекс.Панель: осваиваем 250px"
Yandex
 
Синяя Борода. История одного проекта.
Синяя Борода. История одного проекта.Синяя Борода. История одного проекта.
Синяя Борода. История одного проекта.
Andrew Mayorov
 
Osvaivaem 250px max_shirshin
Osvaivaem 250px max_shirshinOsvaivaem 250px max_shirshin
Osvaivaem 250px max_shirshin
yaevents
 
WebAssembly
WebAssemblyWebAssembly
WebAssembly
Sergey Rubanov
 
Javascript-фреймворки:
 должен остаться только один
Javascript-фреймворки:
 должен остаться только одинJavascript-фреймворки:
 должен остаться только один
Javascript-фреймворки:
 должен остаться только один
Sergey Xek
 
Javascript-фреймворки: должен остаться только один / Аверин Сергей (Acronis)
Javascript-фреймворки: должен остаться только один / Аверин Сергей (Acronis)Javascript-фреймворки: должен остаться только один / Аверин Сергей (Acronis)
Javascript-фреймворки: должен остаться только один / Аверин Сергей (Acronis)
Ontico
 
Clouds NN 2012 Александр Демидов "Битрикс24 архитектура и опыт эксплуатации о...
Clouds NN 2012 Александр Демидов "Битрикс24 архитектура и опыт эксплуатации о...Clouds NN 2012 Александр Демидов "Битрикс24 архитектура и опыт эксплуатации о...
Clouds NN 2012 Александр Демидов "Битрикс24 архитектура и опыт эксплуатации о...
Clouds NN
 

Similar to Василий Чернов — БЭМ в дикой природе (20)

Components now! (in russian)
Components now! (in russian)Components now! (in russian)
Components now! (in russian)
 
BEM на корпоративном веб-ресурсе — отказоустойчивость фронтенда
BEM на корпоративном веб-ресурсе — отказоустойчивость фронтендаBEM на корпоративном веб-ресурсе — отказоустойчивость фронтенда
BEM на корпоративном веб-ресурсе — отказоустойчивость фронтенда
 
BEM for corporate sites — failover frontend
BEM for corporate sites — failover frontendBEM for corporate sites — failover frontend
BEM for corporate sites — failover frontend
 
BEM — block, element, modification conception
BEM — block, element, modification conceptionBEM — block, element, modification conception
BEM — block, element, modification conception
 
Методологии верстки
Методологии версткиМетодологии верстки
Методологии верстки
 
Александр Баумгертнер — Преимущества БЭМ для небольших проектов и компаний
Александр Баумгертнер — Преимущества БЭМ для небольших проектов и компанийАлександр Баумгертнер — Преимущества БЭМ для небольших проектов и компаний
Александр Баумгертнер — Преимущества БЭМ для небольших проектов и компаний
 
Alex baumgertner bem_in_small_projects
Alex baumgertner bem_in_small_projectsAlex baumgertner bem_in_small_projects
Alex baumgertner bem_in_small_projects
 
SECON'2016. Сергей Аверин. Javascript-фреймворки:
 должен остаться только один
SECON'2016. Сергей Аверин. Javascript-фреймворки:
 должен остаться только одинSECON'2016. Сергей Аверин. Javascript-фреймворки:
 должен остаться только один
SECON'2016. Сергей Аверин. Javascript-фреймворки:
 должен остаться только один
 
SECON'2016. Аверин Сергей, Javascript-фреймворки:
 должен остаться только один
SECON'2016. Аверин Сергей, Javascript-фреймворки:
 должен остаться только одинSECON'2016. Аверин Сергей, Javascript-фреймворки:
 должен остаться только один
SECON'2016. Аверин Сергей, Javascript-фреймворки:
 должен остаться только один
 
Сергей Бережной — bem-core v1.0.0
Сергей Бережной — bem-core v1.0.0Сергей Бережной — bem-core v1.0.0
Сергей Бережной — bem-core v1.0.0
 
A вы верите в систематизацию
A вы верите в систематизацию A вы верите в систематизацию
A вы верите в систематизацию
 
Bitrix24 (DevConf)
Bitrix24 (DevConf)Bitrix24 (DevConf)
Bitrix24 (DevConf)
 
«Битрикс24»: архитектура и эксплуатация высоконагруженного облачного сервиса
«Битрикс24»: архитектура и эксплуатация высоконагруженного облачного сервиса«Битрикс24»: архитектура и эксплуатация высоконагруженного облачного сервиса
«Битрикс24»: архитектура и эксплуатация высоконагруженного облачного сервиса
 
Максим Ширшин "Яндекс.Панель: осваиваем 250px"
Максим Ширшин "Яндекс.Панель: осваиваем 250px"Максим Ширшин "Яндекс.Панель: осваиваем 250px"
Максим Ширшин "Яндекс.Панель: осваиваем 250px"
 
Синяя Борода. История одного проекта.
Синяя Борода. История одного проекта.Синяя Борода. История одного проекта.
Синяя Борода. История одного проекта.
 
Osvaivaem 250px max_shirshin
Osvaivaem 250px max_shirshinOsvaivaem 250px max_shirshin
Osvaivaem 250px max_shirshin
 
WebAssembly
WebAssemblyWebAssembly
WebAssembly
 
Javascript-фреймворки:
 должен остаться только один
Javascript-фреймворки:
 должен остаться только одинJavascript-фреймворки:
 должен остаться только один
Javascript-фреймворки:
 должен остаться только один
 
Javascript-фреймворки: должен остаться только один / Аверин Сергей (Acronis)
Javascript-фреймворки: должен остаться только один / Аверин Сергей (Acronis)Javascript-фреймворки: должен остаться только один / Аверин Сергей (Acronis)
Javascript-фреймворки: должен остаться только один / Аверин Сергей (Acronis)
 
Clouds NN 2012 Александр Демидов "Битрикс24 архитектура и опыт эксплуатации о...
Clouds NN 2012 Александр Демидов "Битрикс24 архитектура и опыт эксплуатации о...Clouds NN 2012 Александр Демидов "Битрикс24 архитектура и опыт эксплуатации о...
Clouds NN 2012 Александр Демидов "Битрикс24 архитектура и опыт эксплуатации о...
 

More from Yandex

Предсказание оттока игроков из World of Tanks
Предсказание оттока игроков из World of TanksПредсказание оттока игроков из World of Tanks
Предсказание оттока игроков из World of Tanks
Yandex
 
Как принять/организовать работу по поисковой оптимизации сайта, Сергей Царик,...
Как принять/организовать работу по поисковой оптимизации сайта, Сергей Царик,...Как принять/организовать работу по поисковой оптимизации сайта, Сергей Царик,...
Как принять/организовать работу по поисковой оптимизации сайта, Сергей Царик,...
Yandex
 
Структурированные данные, Юлия Тихоход, лекция в Школе вебмастеров Яндекса
Структурированные данные, Юлия Тихоход, лекция в Школе вебмастеров ЯндексаСтруктурированные данные, Юлия Тихоход, лекция в Школе вебмастеров Яндекса
Структурированные данные, Юлия Тихоход, лекция в Школе вебмастеров Яндекса
Yandex
 
Представление сайта в поиске, Сергей Лысенко, лекция в Школе вебмастеров Яндекса
Представление сайта в поиске, Сергей Лысенко, лекция в Школе вебмастеров ЯндексаПредставление сайта в поиске, Сергей Лысенко, лекция в Школе вебмастеров Яндекса
Представление сайта в поиске, Сергей Лысенко, лекция в Школе вебмастеров Яндекса
Yandex
 
Плохие методы продвижения сайта, Екатерины Гладких, лекция в Школе вебмастеро...
Плохие методы продвижения сайта, Екатерины Гладких, лекция в Школе вебмастеро...Плохие методы продвижения сайта, Екатерины Гладких, лекция в Школе вебмастеро...
Плохие методы продвижения сайта, Екатерины Гладких, лекция в Школе вебмастеро...
Yandex
 
Основные принципы ранжирования, Сергей Царик и Антон Роменский, лекция в Школ...
Основные принципы ранжирования, Сергей Царик и Антон Роменский, лекция в Школ...Основные принципы ранжирования, Сергей Царик и Антон Роменский, лекция в Школ...
Основные принципы ранжирования, Сергей Царик и Антон Роменский, лекция в Школ...
Yandex
 
Основные принципы индексирования сайта, Александр Смирнов, лекция в Школе веб...
Основные принципы индексирования сайта, Александр Смирнов, лекция в Школе веб...Основные принципы индексирования сайта, Александр Смирнов, лекция в Школе веб...
Основные принципы индексирования сайта, Александр Смирнов, лекция в Школе веб...
Yandex
 
Мобильное приложение: как и зачем, Александр Лукин, лекция в Школе вебмастеро...
Мобильное приложение: как и зачем, Александр Лукин, лекция в Школе вебмастеро...Мобильное приложение: как и зачем, Александр Лукин, лекция в Школе вебмастеро...
Мобильное приложение: как и зачем, Александр Лукин, лекция в Школе вебмастеро...
Yandex
 
Сайты на мобильных устройствах, Олег Ножичкин, лекция в Школе вебмастеров Янд...
Сайты на мобильных устройствах, Олег Ножичкин, лекция в Школе вебмастеров Янд...Сайты на мобильных устройствах, Олег Ножичкин, лекция в Школе вебмастеров Янд...
Сайты на мобильных устройствах, Олег Ножичкин, лекция в Школе вебмастеров Янд...
Yandex
 
Качественная аналитика сайта, Юрий Батиевский, лекция в Школе вебмастеров Янд...
Качественная аналитика сайта, Юрий Батиевский, лекция в Школе вебмастеров Янд...Качественная аналитика сайта, Юрий Батиевский, лекция в Школе вебмастеров Янд...
Качественная аналитика сайта, Юрий Батиевский, лекция в Школе вебмастеров Янд...
Yandex
 
Что можно и что нужно измерять на сайте, Петр Аброськин, лекция в Школе вебма...
Что можно и что нужно измерять на сайте, Петр Аброськин, лекция в Школе вебма...Что можно и что нужно измерять на сайте, Петр Аброськин, лекция в Школе вебма...
Что можно и что нужно измерять на сайте, Петр Аброськин, лекция в Школе вебма...
Yandex
 
Как правильно поставить ТЗ на создание сайта, Алексей Бородкин, лекция в Школ...
Как правильно поставить ТЗ на создание сайта, Алексей Бородкин, лекция в Школ...Как правильно поставить ТЗ на создание сайта, Алексей Бородкин, лекция в Школ...
Как правильно поставить ТЗ на создание сайта, Алексей Бородкин, лекция в Школ...
Yandex
 
Как защитить свой сайт, Пётр Волков, лекция в Школе вебмастеров
Как защитить свой сайт, Пётр Волков, лекция в Школе вебмастеровКак защитить свой сайт, Пётр Волков, лекция в Школе вебмастеров
Как защитить свой сайт, Пётр Волков, лекция в Школе вебмастеров
Yandex
 
Как правильно составить структуру сайта, Дмитрий Сатин, лекция в Школе вебмас...
Как правильно составить структуру сайта, Дмитрий Сатин, лекция в Школе вебмас...Как правильно составить структуру сайта, Дмитрий Сатин, лекция в Школе вебмас...
Как правильно составить структуру сайта, Дмитрий Сатин, лекция в Школе вебмас...
Yandex
 
Технические особенности создания сайта, Дмитрий Васильева, лекция в Школе веб...
Технические особенности создания сайта, Дмитрий Васильева, лекция в Школе веб...Технические особенности создания сайта, Дмитрий Васильева, лекция в Школе веб...
Технические особенности создания сайта, Дмитрий Васильева, лекция в Школе веб...
Yandex
 
Конструкторы для отдельных элементов сайта, Елена Першина, лекция в Школе веб...
Конструкторы для отдельных элементов сайта, Елена Першина, лекция в Школе веб...Конструкторы для отдельных элементов сайта, Елена Першина, лекция в Школе веб...
Конструкторы для отдельных элементов сайта, Елена Першина, лекция в Школе веб...
Yandex
 
Контент для интернет-магазинов, Катерина Ерошина, лекция в Школе вебмастеров ...
Контент для интернет-магазинов, Катерина Ерошина, лекция в Школе вебмастеров ...Контент для интернет-магазинов, Катерина Ерошина, лекция в Школе вебмастеров ...
Контент для интернет-магазинов, Катерина Ерошина, лекция в Школе вебмастеров ...
Yandex
 
Как написать хороший текст для сайта, Катерина Ерошина, лекция в Школе вебмас...
Как написать хороший текст для сайта, Катерина Ерошина, лекция в Школе вебмас...Как написать хороший текст для сайта, Катерина Ерошина, лекция в Школе вебмас...
Как написать хороший текст для сайта, Катерина Ерошина, лекция в Школе вебмас...
Yandex
 
Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Ш...
Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Ш...Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Ш...
Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Ш...
Yandex
 
Cайт. Зачем он и каким должен быть, Алексей Иванов, лекция в Школе вебмастеро...
Cайт. Зачем он и каким должен быть, Алексей Иванов, лекция в Школе вебмастеро...Cайт. Зачем он и каким должен быть, Алексей Иванов, лекция в Школе вебмастеро...
Cайт. Зачем он и каким должен быть, Алексей Иванов, лекция в Школе вебмастеро...
Yandex
 

More from Yandex (20)

Предсказание оттока игроков из World of Tanks
Предсказание оттока игроков из World of TanksПредсказание оттока игроков из World of Tanks
Предсказание оттока игроков из World of Tanks
 
Как принять/организовать работу по поисковой оптимизации сайта, Сергей Царик,...
Как принять/организовать работу по поисковой оптимизации сайта, Сергей Царик,...Как принять/организовать работу по поисковой оптимизации сайта, Сергей Царик,...
Как принять/организовать работу по поисковой оптимизации сайта, Сергей Царик,...
 
Структурированные данные, Юлия Тихоход, лекция в Школе вебмастеров Яндекса
Структурированные данные, Юлия Тихоход, лекция в Школе вебмастеров ЯндексаСтруктурированные данные, Юлия Тихоход, лекция в Школе вебмастеров Яндекса
Структурированные данные, Юлия Тихоход, лекция в Школе вебмастеров Яндекса
 
Представление сайта в поиске, Сергей Лысенко, лекция в Школе вебмастеров Яндекса
Представление сайта в поиске, Сергей Лысенко, лекция в Школе вебмастеров ЯндексаПредставление сайта в поиске, Сергей Лысенко, лекция в Школе вебмастеров Яндекса
Представление сайта в поиске, Сергей Лысенко, лекция в Школе вебмастеров Яндекса
 
Плохие методы продвижения сайта, Екатерины Гладких, лекция в Школе вебмастеро...
Плохие методы продвижения сайта, Екатерины Гладких, лекция в Школе вебмастеро...Плохие методы продвижения сайта, Екатерины Гладких, лекция в Школе вебмастеро...
Плохие методы продвижения сайта, Екатерины Гладких, лекция в Школе вебмастеро...
 
Основные принципы ранжирования, Сергей Царик и Антон Роменский, лекция в Школ...
Основные принципы ранжирования, Сергей Царик и Антон Роменский, лекция в Школ...Основные принципы ранжирования, Сергей Царик и Антон Роменский, лекция в Школ...
Основные принципы ранжирования, Сергей Царик и Антон Роменский, лекция в Школ...
 
Основные принципы индексирования сайта, Александр Смирнов, лекция в Школе веб...
Основные принципы индексирования сайта, Александр Смирнов, лекция в Школе веб...Основные принципы индексирования сайта, Александр Смирнов, лекция в Школе веб...
Основные принципы индексирования сайта, Александр Смирнов, лекция в Школе веб...
 
Мобильное приложение: как и зачем, Александр Лукин, лекция в Школе вебмастеро...
Мобильное приложение: как и зачем, Александр Лукин, лекция в Школе вебмастеро...Мобильное приложение: как и зачем, Александр Лукин, лекция в Школе вебмастеро...
Мобильное приложение: как и зачем, Александр Лукин, лекция в Школе вебмастеро...
 
Сайты на мобильных устройствах, Олег Ножичкин, лекция в Школе вебмастеров Янд...
Сайты на мобильных устройствах, Олег Ножичкин, лекция в Школе вебмастеров Янд...Сайты на мобильных устройствах, Олег Ножичкин, лекция в Школе вебмастеров Янд...
Сайты на мобильных устройствах, Олег Ножичкин, лекция в Школе вебмастеров Янд...
 
Качественная аналитика сайта, Юрий Батиевский, лекция в Школе вебмастеров Янд...
Качественная аналитика сайта, Юрий Батиевский, лекция в Школе вебмастеров Янд...Качественная аналитика сайта, Юрий Батиевский, лекция в Школе вебмастеров Янд...
Качественная аналитика сайта, Юрий Батиевский, лекция в Школе вебмастеров Янд...
 
Что можно и что нужно измерять на сайте, Петр Аброськин, лекция в Школе вебма...
Что можно и что нужно измерять на сайте, Петр Аброськин, лекция в Школе вебма...Что можно и что нужно измерять на сайте, Петр Аброськин, лекция в Школе вебма...
Что можно и что нужно измерять на сайте, Петр Аброськин, лекция в Школе вебма...
 
Как правильно поставить ТЗ на создание сайта, Алексей Бородкин, лекция в Школ...
Как правильно поставить ТЗ на создание сайта, Алексей Бородкин, лекция в Школ...Как правильно поставить ТЗ на создание сайта, Алексей Бородкин, лекция в Школ...
Как правильно поставить ТЗ на создание сайта, Алексей Бородкин, лекция в Школ...
 
Как защитить свой сайт, Пётр Волков, лекция в Школе вебмастеров
Как защитить свой сайт, Пётр Волков, лекция в Школе вебмастеровКак защитить свой сайт, Пётр Волков, лекция в Школе вебмастеров
Как защитить свой сайт, Пётр Волков, лекция в Школе вебмастеров
 
Как правильно составить структуру сайта, Дмитрий Сатин, лекция в Школе вебмас...
Как правильно составить структуру сайта, Дмитрий Сатин, лекция в Школе вебмас...Как правильно составить структуру сайта, Дмитрий Сатин, лекция в Школе вебмас...
Как правильно составить структуру сайта, Дмитрий Сатин, лекция в Школе вебмас...
 
Технические особенности создания сайта, Дмитрий Васильева, лекция в Школе веб...
Технические особенности создания сайта, Дмитрий Васильева, лекция в Школе веб...Технические особенности создания сайта, Дмитрий Васильева, лекция в Школе веб...
Технические особенности создания сайта, Дмитрий Васильева, лекция в Школе веб...
 
Конструкторы для отдельных элементов сайта, Елена Першина, лекция в Школе веб...
Конструкторы для отдельных элементов сайта, Елена Першина, лекция в Школе веб...Конструкторы для отдельных элементов сайта, Елена Першина, лекция в Школе веб...
Конструкторы для отдельных элементов сайта, Елена Першина, лекция в Школе веб...
 
Контент для интернет-магазинов, Катерина Ерошина, лекция в Школе вебмастеров ...
Контент для интернет-магазинов, Катерина Ерошина, лекция в Школе вебмастеров ...Контент для интернет-магазинов, Катерина Ерошина, лекция в Школе вебмастеров ...
Контент для интернет-магазинов, Катерина Ерошина, лекция в Школе вебмастеров ...
 
Как написать хороший текст для сайта, Катерина Ерошина, лекция в Школе вебмас...
Как написать хороший текст для сайта, Катерина Ерошина, лекция в Школе вебмас...Как написать хороший текст для сайта, Катерина Ерошина, лекция в Школе вебмас...
Как написать хороший текст для сайта, Катерина Ерошина, лекция в Школе вебмас...
 
Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Ш...
Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Ш...Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Ш...
Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Ш...
 
Cайт. Зачем он и каким должен быть, Алексей Иванов, лекция в Школе вебмастеро...
Cайт. Зачем он и каким должен быть, Алексей Иванов, лекция в Школе вебмастеро...Cайт. Зачем он и каким должен быть, Алексей Иванов, лекция в Школе вебмастеро...
Cайт. Зачем он и каким должен быть, Алексей Иванов, лекция в Школе вебмастеро...
 

Василий Чернов — БЭМ в дикой природе

  • 1. БЭМ в дикой природе Василий Чернов 01
  • 2. Среда обитания 1. Атмосфера: внутренние проекты и заказная разработка, Agile 2. География: Москва, Оренбург, Новосибирск, Воронеж, Красноярск, Таганрог 3. Внешние факторы: PHP, .NET, Java, 1С-Битрикс, Microsoft SharePoint 02
  • 4. Естественные враги 1. устаревание документации 2. географическая распределенность 3. сложность совместной работы 4. непереносимость решений 5. PHP :( 04
  • 5. Эволюционные изменения • HTML — свой BEMXML • CSS — классическая нотация записи CSS-классов, разбиение на файлы блоков • JS 05
  • 6. Пишем HTML по БЭМ — BEMXML • преобразовение БЭМ-дерева в DOM-дерево • управление семантикой узлов • простая система шаблонов • возможность подключать XSLT-шаблоны (но их никто не пишет :) Достаточно уметь писать XML и знать BEMXML-синтаксис https://github.com/bivihoba/slcf-compiler 06
  • 7. XML
  • 8. Структура BEMXML-страницы 01. <page> 02. <project> 03. <include href="default-semantic.xml"/> 04. <include href="templates.xml"/> 05. </project> 06. <default-semantic> 07. <b:page-title tag="h1"/> 08. </default-semantic> 09. <templates> 10. <p:page-title>Страница не найдена</p:page-title> 11. <t:main-content> 12. <p:page-title/> 13. </t:main-content> 14. </templates> 15. <page-canvas> 16. <p:layout/> 17. </page-canvas> 18. </page>
  • 9. Структура BEMXML-страницы 01. <page> Подключаем общие файлы 02. <project> 03. <include href="default-semantic.xml"/> 04. <include href="templates.xml"/> 05. </project> 06. <default-semantic> 07. <b:page-title tag="h1"/> 08. </default-semantic> 09. <templates> 10. <p:page-title>Страница не найдена</p:page-title> 11. <t:main-content> 12. <p:page-title/> 13. </t:main-content> 14. </templates> 15. <page-canvas> 16. <p:layout/> 17. </page-canvas> 18. </page>
  • 10. Структура BEMXML-страницы 01. <page> 02. <project> 03. <include href="default-semantic.xml"/> 04. <include href="templates.xml"/> 05. </project> Определяем семантику 06. <default-semantic> 07. <b:page-title tag="h1"/> 08. </default-semantic> 09. <templates> 10. <p:page-title>Страница не найдена</p:page-title> 11. <t:main-content> 12. <p:page-title/> 13. </t:main-content> 14. </templates> 15. <page-canvas> 16. <p:layout/> 17. </page-canvas> 18. </page>
  • 11. Структура BEMXML-страницы 01. <page> 02. <project> 03. <include href="default-semantic.xml"/> 04. <include href="templates.xml"/> 05. </project> 06. <default-semantic> 07. <b:page-title tag="h1"/> 08. </default-semantic> Объявляем шаблоны 09. <templates> 10. <p:page-title>Страница не найдена</p:page-title> 11. <t:main-content> 12. <p:page-title/> 13. </t:main-content> 14. </templates> 15. <page-canvas> 16. <p:layout/> 17. </page-canvas> 18. </page>
  • 12. Структура BEMXML-страницы 01. <page> 02. <project> 03. <include href="default-semantic.xml"/> 04. <include href="templates.xml"/> 05. </project> 06. <default-semantic> 07. <b:page-title tag="h1"/> 08. </default-semantic> 09. <templates> 10. <p:page-title>Страница не найдена</p:page-title> 11. <t:main-content> 12. <p:page-title/> 13. </t:main-content> 14. </templates> Выводим всё на страницу 15. <page-canvas> 16. <p:layout/> 17. </page-canvas> 18. </page>
  • 13. BEMXML-разметка 01. <b:product> 02. <m:viewtype val="complete"/> 03. <a:article> 04. <m:viewtype val="s1"/> 05. <m:content val="product"/> 06. </a:article> 07. <e:details> 08. <a:section> 09. <m:viewtype val="s1-details"/> 10. <m:content val="product-details"/> 11. </a:section> 12. <e:header block="section"> 13. <e:title> 14. <a:title block-of="article"/> 15. <a:page-title/>
  • 14. BEMXML-разметка Блок 01. <b:product> 02. <m:viewtype val="complete"/> 03. <a:article> 04. <m:viewtype val="s1"/> 05. <m:content val="product"/> 06. </a:article> 07. <e:details> 08. <a:section> 09. <m:viewtype val="s1-details"/> 10. <m:content val="product-details"/> 11. </a:section> 12. <e:header block="section"> 13. <e:title> 14. <a:title block-of="article"/> 15. <a:page-title/>
  • 15. BEMXML-разметка 01. <b:product> 02. <m:viewtype val="complete"/> 03. <a:article> 04. <m:viewtype val="s1"/> 05. <m:content val="product"/> 06. </a:article> 07. <e:details> 08. <a:section> 09. <m:viewtype val="s1-details"/> 10. <m:content val="product-details"/> 11. </a:section> 12. <e:header block="section"> 13. <e:title> 14. <a:title block-of="article"/> 15. <a:page-title/> Элементы блока
  • 16. BEMXML-разметка 01. <b:product> 02. <m:viewtype val="complete"/> 03. <a:article> 04. <m:viewtype val="s1"/> 05. <m:content val="product"/> 06. </a:article> 07. <e:details> 08. <a:section> 09. <m:viewtype val="s1-details"/> 10. <m:content val="product-details"/> 11. </a:section> элементу можно назначить блок вручную 12. <e:header block="section"> 13. <e:title> 14. <a:title block-of="article"/> 15. <a:page-title/>
  • 17. BEMXML-разметка 01. <b:product> 02. <m:viewtype val="complete"/> 03. <a:article> 04. <m:viewtype val="s1"/> 05. <m:content val="product"/> 06. </a:article> 07. <e:details> 08. <a:section> 09. <m:viewtype val="s1-details"/> 10. <m:content val="product-details"/> 11. </a:section> 12. <e:header block="section"> 13. <e:title> 14. <a:title block-of="article"/> 15. <a:page-title/> Модификация блока
  • 18. BEMXML-разметка 01. <b:product> 02. <m:viewtype val="complete"/> Можно примешать блок 03. <a:article> 04. <m:viewtype val="s1"/> 05. <m:content val="product"/> 06. </a:article> 07. <e:details> 08. <a:section> 09. <m:viewtype val="s1-details"/> 10. <m:content val="product-details"/> 11. </a:section> 12. <e:header block="section"> 13. <e:title> 14. <a:title block-of="article"/> 15. <a:page-title/>
  • 19. BEMXML-разметка 01. <b:product> 02. <m:viewtype val="complete"/> 03. <a:article> 04. <m:viewtype val="s1"/> 05. <m:content val="product"/> 06. </a:article> 07. <e:details> 08. <a:section> 09. <m:viewtype val="s1-details"/> 10. <m:content val="product-details"/> 11. </a:section> 12. <e:header block="section"> 13. <e:title> 14. <a:title block-of="article"/> 15. <a:page-title/> ... или элемент блока
  • 20. BEMXML-разметка 01. <b:product> 02. <m:viewtype val="complete"/> 03. <a:article> Можно добавлять модификации 04. <m:viewtype val="s1"/> 05. <m:content val="product"/> 06. </a:article> 07. <e:details> 08. <a:section> на примешанные блоки 09. <m:viewtype val="s1-details"/> 10. <m:content val="product-details"/> 11. </a:section> 12. <e:header block="section"> 13. <e:title> 14. <a:title block-of="article"/> 15. <a:page-title/>
  • 21. Результаты • Актуальная документация • Ускорение процесса верстки • Быстрое внедрение в работу • Навязывание БЭМ-мышления 08
  • 22. Как мы пишем CSS по БЭМ • Каскад • Миксы • Блок vs. модификатор • Сочетание модификаторов • Блоки на файловой системе 09
  • 23. Блок + элемент блока 01. .b-region 02. .b-region __title { margin-right: 20px; 03. } Излишне, такая связь заложена на уровне синтаксиса 10
  • 24. Модификатор блока + элемент .b-list_type_simple .b-list__item {} 01. <ul class="b-list b-list_type_simple"> 02. <li class=" b-list__item "> 03. <ol class="b-list b-list_type_numeric"> 04. <li class=" b-list__item "> Приемлимо, но могут быть неприятные эффекты 11
  • 25. Сущности из разных блоков .b-article .b-link {...} /* «межблочный каскад» */ неприемлимо, но по-разному — зависит от семантики: 01. .b-article .b-link {} 02. .b-pagination .b-link {} 12
  • 26. Полегче с миксами! • «узаконенный каскад» • микс != глобальный модификатор .b-inline {display:inline;} <h4 class="b-product__title b-inline "/> Блок должен иметь ценность сам по себе. 13
  • 27. 01. <article class=" b-article b-product 02. b-article_content_product b-product_type_sale "> <header class=" b-article__header "/> 03. <h3 class=" b-product__title "/>Title</h3> 04. </header> 05. <div class=" b-article__content b-product__descriptio 01. .b-product_type_sale .b-product__title {} 02. .b-article_content_product .b-article__header {} 14
  • 28. 15
  • 29. 16
  • 30. Меньше блоков Вместо трех блоков: b-span1 b-span2 b-span3 один с модификаторами b-span_ size_1 17 b-span_ size_2 b-span_ size_3
  • 32. Где же этот ящик...
  • 33. Больше блоков плюс сущность .b-menu_type_main -> b-main-menu минус связь .b-menu_type_main .b-menu__item -> b-main-menu__item 20
  • 34. Больше типов. Общие модификаторы • type - ключевые свойства и особенности • layout - раскладка • viewtype - представление • viewtype-theme - тема/скин в пределах выбранного viewtype • content - содержимое • context - контекст 21
  • 35. Каскад модификаторов • .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 22
  • 36. Постепенное выделение блоков на файловой системе • .b-button.css • .b-button_state.css • .b-button_state_pressed.css 23
  • 37. Результаты • Минимальные затраты на инфраструктуру • Всегда «знакомый» код • Возможность оценивать качество проектирования 24
  • 38. У нас есть план • доработка нашей библиотеки блоков • i-bem.js • миграция на bem-tools/enb • ... • PROFIT! 25
  • 39. Василий Чернов руководитель группы верстки, департамент разработки интернет-проектов, Softline vasiliy.chernov@softline.ru @bivihoba cлайды