Что такое BSTRUCT? 24.08.2015
В процессе frontend-разработки мне постоянно приходилось сталкиваться с выполнением чисто механических задач — верстка блока, а затем создание css-каркаса для его визуального оформления. Я решил автоматизировать этот процесс, используя некоторые принципы теории БЭМ. Так для меня родился BSTRUCT.
BSTRUCT — это «компилятор» специальных синтаксических конструкций (дальше я буду называть их bstruct-схемами) в html и scss-шаблоны.
BSTRUCT накладывает ограничения на именование классов CSS в соответствие с логической структурой разметки. Весь набор доступных для использования на веб-странице элементов представлен в виде так называемых блоков. Блоком может быть, например, шапка или подвал страницы, форма авторизации, меню и т.п. Соответственно, для каждой такой логической структуры создается блок с уникальным CSS-классом, имя которого формируется по шаблону block-<название блока>. Соответственно, все CSS-стили, которые относятся к оформлению данного блока, ограничиваются пространством имен класса .block-<название блока>. Имена классов CSS дочерних элементов блока формируются по шаблону <название блока>_<название элемента>. Подобные требования к именованию классов предотвращает возможность случайного наложения стилей, используемых в одном блоке, на элементы другого. Использование BSTRUCT обеспечивает выполнение данных требований автоматически.
Итак, BSTRUCT обеспечивает автоматическую генерацию шаблонов HTML и SCSS с использованием описанных выше правил именования классов CSS, а также генерацию шаблонов Mustache.
Использование BSTRUCT наглядно демонстрирует следующий пример. bstruct-схема
b:header id:main e:logo>img src:{{src}} e:link>a p:name b:footer e:copyright>a e:links>ul p:items e:>li p:link
будет скомпилирован в следующие HTML и SCSS — шаблоны:
<div class="block-header" id="main">
<img class="header_logo" src="{{src}}" alt=""/>
<a class="header_link" href="#" title="">{{name}}</a>
</div>
<div class="block-footer">
<a class="footer_copyright" href="#" title=""></a>
<ul class="footer_links">
{{#items}}
<li>{{link}}</li>
{{/items}}
</ul>
</div>
.block-header {
img.header_logo {
}
a.header_link {
}
}
.block-footer {
a.footer_copyright {
}
ul.footer_links {
& > li {
}
}
}
Таким образом, описав структуру блока в виде bstruct-схемы, мы убиваем двух зайцев.
BSTRUCT доступен в виде npm-модуля, исходный код компилятора доступен в репозитории GitHub.
by Ivan 24.08.2015