![Page 1: BEM и BEViS. Разработка интерфейсов в большом городе](https://reader033.vdocuments.com.br/reader033/viewer/2022061201/5478eb4eb4795983098b463f/html5/thumbnails/1.jpg)
BEM, BEViSРазработка интерфейсов в большом городе
Вениамин Тамбуринразработчик интерфейсов
![Page 2: BEM и BEViS. Разработка интерфейсов в большом городе](https://reader033.vdocuments.com.br/reader033/viewer/2022061201/5478eb4eb4795983098b463f/html5/thumbnails/2.jpg)
История
![Page 3: BEM и BEViS. Разработка интерфейсов в большом городе](https://reader033.vdocuments.com.br/reader033/viewer/2022061201/5478eb4eb4795983098b463f/html5/thumbnails/3.jpg)
about.htmlindex.htmlproject/
project.jsproject.css
images/
![Page 4: BEM и BEViS. Разработка интерфейсов в большом городе](https://reader033.vdocuments.com.br/reader033/viewer/2022061201/5478eb4eb4795983098b463f/html5/thumbnails/4.jpg)
/* Albums (begin) */ .result .albums .info { padding-right: 8.5em; }
.result .albums .title { float: left; padding-bottom: 0.3em; }/* Albums (end) */
![Page 5: BEM и BEViS. Разработка интерфейсов в большом городе](https://reader033.vdocuments.com.br/reader033/viewer/2022061201/5478eb4eb4795983098b463f/html5/thumbnails/5.jpg)
– скрипты и стили раздуваются
– приходится вносить изменения в двух местах
– трудно придумывать уникальные названия
![Page 6: BEM и BEViS. Разработка интерфейсов в большом городе](https://reader033.vdocuments.com.br/reader033/viewer/2022061201/5478eb4eb4795983098b463f/html5/thumbnails/6.jpg)
Блоки
![Page 7: BEM и BEViS. Разработка интерфейсов в большом городе](https://reader033.vdocuments.com.br/reader033/viewer/2022061201/5478eb4eb4795983098b463f/html5/thumbnails/7.jpg)
b- визуальный блок
с- контрольный блок
i- управляющий блок
g- глобальный модуль
h- вспомогательный блок-хелпер
![Page 8: BEM и BEViS. Разработка интерфейсов в большом городе](https://reader033.vdocuments.com.br/reader033/viewer/2022061201/5478eb4eb4795983098b463f/html5/thumbnails/8.jpg)
.b-head { … }.b-head .logo { … }.b-head .logo a { … } .b-head .right { … }
.b-head .info { … }
.b-head .info .exit { … }
![Page 9: BEM и BEViS. Разработка интерфейсов в большом городе](https://reader033.vdocuments.com.br/reader033/viewer/2022061201/5478eb4eb4795983098b463f/html5/thumbnails/9.jpg)
Библиотека
![Page 10: BEM и BEViS. Разработка интерфейсов в большом городе](https://reader033.vdocuments.com.br/reader033/viewer/2022061201/5478eb4eb4795983098b463f/html5/thumbnails/10.jpg)
index.htmlcss/
yaru.cssyaru-ie.css
js/yaru.js
i/yandex.png
![Page 11: BEM и BEViS. Разработка интерфейсов в большом городе](https://reader033.vdocuments.com.br/reader033/viewer/2022061201/5478eb4eb4795983098b463f/html5/thumbnails/11.jpg)
@import url(common.yandex.ru/css/global.css); .b-head .service { … }.b-head .service h1 { … }
![Page 12: BEM и BEViS. Разработка интерфейсов в большом городе](https://reader033.vdocuments.com.br/reader033/viewer/2022061201/5478eb4eb4795983098b463f/html5/thumbnails/12.jpg)
Верстка независимыми блокам
![Page 13: BEM и BEViS. Разработка интерфейсов в большом городе](https://reader033.vdocuments.com.br/reader033/viewer/2022061201/5478eb4eb4795983098b463f/html5/thumbnails/13.jpg)
• Блоки и элементы описываются классами
• Стили не могут опираться на тэги
• Все имена классов начинаются с имени блока
• В стилях не может быть класса вне блока
![Page 14: BEM и BEViS. Разработка интерфейсов в большом городе](https://reader033.vdocuments.com.br/reader033/viewer/2022061201/5478eb4eb4795983098b463f/html5/thumbnails/14.jpg)
•Контекстом:
.b-block {font-style: normal;
}
.b-footer .b-block {font-style: italic;
}
•Постфиксом:
class="b-block b-block-postfix"
![Page 15: BEM и BEViS. Разработка интерфейсов в большом городе](https://reader033.vdocuments.com.br/reader033/viewer/2022061201/5478eb4eb4795983098b463f/html5/thumbnails/15.jpg)
common/ css/js/xsl/
service/auto/
css/js/xsl/
![Page 16: BEM и BEViS. Разработка интерфейсов в большом городе](https://reader033.vdocuments.com.br/reader033/viewer/2022061201/5478eb4eb4795983098b463f/html5/thumbnails/16.jpg)
– Части одного блока разбросаным местам
– Правки блока приходится делать в разных частях проекта
![Page 17: BEM и BEViS. Разработка интерфейсов в большом городе](https://reader033.vdocuments.com.br/reader033/viewer/2022061201/5478eb4eb4795983098b463f/html5/thumbnails/17.jpg)
БЭМ
![Page 18: BEM и BEViS. Разработка интерфейсов в большом городе](https://reader033.vdocuments.com.br/reader033/viewer/2022061201/5478eb4eb4795983098b463f/html5/thumbnails/18.jpg)
![Page 19: BEM и BEViS. Разработка интерфейсов в большом городе](https://reader033.vdocuments.com.br/reader033/viewer/2022061201/5478eb4eb4795983098b463f/html5/thumbnails/19.jpg)
common/block/
b-head-logo/name/
b-head-logo.name.css_theme/
b-head-logo_gray.cssb-head-logo_gray.pngb-head-logo.cssb-head-logo.js
![Page 20: BEM и BEViS. Разработка интерфейсов в большом городе](https://reader033.vdocuments.com.br/reader033/viewer/2022061201/5478eb4eb4795983098b463f/html5/thumbnails/20.jpg)
<lego:page><lego:l-head>
<lego:b-head-logo><lego:name/>
</lego:b-head-logo><lego:b-head-tabs type="search"/>
…
![Page 21: BEM и BEViS. Разработка интерфейсов в большом городе](https://reader033.vdocuments.com.br/reader033/viewer/2022061201/5478eb4eb4795983098b463f/html5/thumbnails/21.jpg)
![Page 22: BEM и BEViS. Разработка интерфейсов в большом городе](https://reader033.vdocuments.com.br/reader033/viewer/2022061201/5478eb4eb4795983098b463f/html5/thumbnails/22.jpg)
<xsl:template match = "*" ><Tag>
<xsl:attribute name="name"> <xsl:value-of select="name(.)"/> </xsl:attribute>
</Tag></xsl:template>
![Page 23: BEM и BEViS. Разработка интерфейсов в большом городе](https://reader033.vdocuments.com.br/reader033/viewer/2022061201/5478eb4eb4795983098b463f/html5/thumbnails/23.jpg)
![Page 24: BEM и BEViS. Разработка интерфейсов в большом городе](https://reader033.vdocuments.com.br/reader033/viewer/2022061201/5478eb4eb4795983098b463f/html5/thumbnails/24.jpg)
BEMHTML
![Page 25: BEM и BEViS. Разработка интерфейсов в большом городе](https://reader033.vdocuments.com.br/reader033/viewer/2022061201/5478eb4eb4795983098b463f/html5/thumbnails/25.jpg)
Входные данные:
{ block: 'menu' }
Декларация BEMHTML:
block menu, tag: 'ul'
![Page 26: BEM и BEViS. Разработка интерфейсов в большом городе](https://reader033.vdocuments.com.br/reader033/viewer/2022061201/5478eb4eb4795983098b463f/html5/thumbnails/26.jpg)
Библиотека:
block button {tag: 'button'content: 'Submit'
}
Проект:
block button, mix: [{ block: 'link' }
]
![Page 27: BEM и BEViS. Разработка интерфейсов в большом городе](https://reader033.vdocuments.com.br/reader033/viewer/2022061201/5478eb4eb4795983098b463f/html5/thumbnails/27.jpg)
Входные данные:
{ block: ‘button’ }
Результат:
<button class="button link">Submit</button>
![Page 28: BEM и BEViS. Разработка интерфейсов в большом городе](https://reader033.vdocuments.com.br/reader033/viewer/2022061201/5478eb4eb4795983098b463f/html5/thumbnails/28.jpg)
– Неудобный синтаксис BEMHTML
– Непредсказуемая работа доопределенного на проекте блока
– Абсолютно независимые блоки на самом деле не являются таковыми
![Page 29: BEM и BEViS. Разработка интерфейсов в большом городе](https://reader033.vdocuments.com.br/reader033/viewer/2022061201/5478eb4eb4795983098b463f/html5/thumbnails/29.jpg)
BEViS
![Page 30: BEM и BEViS. Разработка интерфейсов в большом городе](https://reader033.vdocuments.com.br/reader033/viewer/2022061201/5478eb4eb4795983098b463f/html5/thumbnails/30.jpg)
– Нет специального языка шаблонизатора
– Нет миксинов
– Нет доопределения блоков
– Ресет каждого блока
![Page 31: BEM и BEViS. Разработка интерфейсов в большом городе](https://reader033.vdocuments.com.br/reader033/viewer/2022061201/5478eb4eb4795983098b463f/html5/thumbnails/31.jpg)
bt.match(‘menu', function (ctx) {ctx.setTag(‘li');
});
![Page 32: BEM и BEViS. Разработка интерфейсов в большом городе](https://reader033.vdocuments.com.br/reader033/viewer/2022061201/5478eb4eb4795983098b463f/html5/thumbnails/32.jpg)
{block: ‘button’,view: ‘shadow’
}
.button_normal-shadow {skin-common();skin-shadow();
}
![Page 33: BEM и BEViS. Разработка интерфейсов в большом городе](https://reader033.vdocuments.com.br/reader033/viewer/2022061201/5478eb4eb4795983098b463f/html5/thumbnails/33.jpg)
<div class="button _pressed"/>
button._pressed {background-color: yellow;
}
![Page 34: BEM и BEViS. Разработка интерфейсов в большом городе](https://reader033.vdocuments.com.br/reader033/viewer/2022061201/5478eb4eb4795983098b463f/html5/thumbnails/34.jpg)
ru.bem.info/method
github.com/bevis-ui/docs
github.com/enb-make/enb
![Page 35: BEM и BEViS. Разработка интерфейсов в большом городе](https://reader033.vdocuments.com.br/reader033/viewer/2022061201/5478eb4eb4795983098b463f/html5/thumbnails/35.jpg)
2014.codefest.ru
![Page 36: BEM и BEViS. Разработка интерфейсов в большом городе](https://reader033.vdocuments.com.br/reader033/viewer/2022061201/5478eb4eb4795983098b463f/html5/thumbnails/36.jpg)
Спасибо!
Вениамин Тамбуринразработчик интерфейсов