Что такое 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.