BEM, BEViSРазработка интерфейсов в большом городе

Вениамин Тамбуринразработчик интерфейсов

История

about.htmlindex.htmlproject/

project.jsproject.css

images/

/* Albums (begin) */ .result .albums .info { padding-right: 8.5em; }

.result .albums .title { float: left; padding-bottom: 0.3em; }/* Albums (end) */

– скрипты и стили раздуваются

– приходится вносить изменения в двух местах

– трудно придумывать уникальные названия

Блоки

b- визуальный блок

с- контрольный блок

i- управляющий блок

g- глобальный модуль

h- вспомогательный блок-хелпер

.b-head { … }.b-head .logo { … }.b-head .logo a { … } .b-head .right { … }

.b-head .info { … }

.b-head .info .exit { … }

Библиотека

index.htmlcss/

yaru.cssyaru-ie.css

js/yaru.js

i/yandex.png

@import url(common.yandex.ru/css/global.css); .b-head .service { … }.b-head .service h1 { … }

Верстка независимыми блокам

• Блоки и элементы описываются классами

• Стили не могут опираться на тэги

• Все имена классов начинаются с имени блока

• В стилях не может быть класса вне блока

•Контекстом:

.b-block {font-style: normal;

}

.b-footer .b-block {font-style: italic;

}

•Постфиксом:

class="b-block b-block-postfix"

common/ css/js/xsl/ 

service/auto/

css/js/xsl/

– Части одного блока разбросаным местам

– Правки блока приходится делать в разных частях проекта

БЭМ

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

<lego:page><lego:l-head>

<lego:b-head-logo><lego:name/>

</lego:b-head-logo><lego:b-head-tabs type="search"/>

…

<xsl:template match = "*" ><Tag>

<xsl:attribute name="name"> <xsl:value-of select="name(.)"/> </xsl:attribute>

</Tag></xsl:template>

BEMHTML

Входные данные:

{ block: 'menu' }

Декларация BEMHTML:

block menu, tag: 'ul' 

Библиотека:

block button {tag: 'button'content: 'Submit'

}

Проект:

block button, mix: [{ block: 'link' }

] 

Входные данные:

{ block: ‘button’ }

Результат:

<button class="button link">Submit</button> 

– Неудобный синтаксис BEMHTML

– Непредсказуемая работа доопределенного на проекте блока

– Абсолютно независимые блоки на самом деле не являются таковыми

BEViS

– Нет специального языка шаблонизатора

– Нет миксинов

– Нет доопределения блоков

– Ресет каждого блока

bt.match(‘menu', function (ctx) {ctx.setTag(‘li');

});

{block: ‘button’,view: ‘shadow’

}

.button_normal-shadow {skin-common();skin-shadow();

}

<div class="button _pressed"/>

button._pressed {background-color: yellow;

}

ru.bem.info/method

github.com/bevis-ui/docs

github.com/enb-make/enb

2014.codefest.ru

Спасибо!

Вениамин Тамбуринразработчик интерфейсов