Post on 29-Nov-2014
description
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
Спасибо!
Вениамин Тамбуринразработчик интерфейсов