Это удобно, если вы делаете не статичную вёрстку, а полный цикл разработки. Такой подход называется «трёхзвенная архитектура» (
определение,
статья). Bemjson никто не пишет, он генерируется «автоматически» с помощью функций-шаблонов:
1) json с данными (с сервера, например);
2) json + BEMTREE = BEMJSON;
3) BEMJSON + BEMHTML = HTML.
Популярный
project-stub — это не production-ready решение, это демонстрация концепции, там bemjson написан вручную просто для упрощения понимания.
Ваше же решение сильно ограничено, т. к. является не декларативным шаблоном, а чисто императивным, как и JSX. Используя XJST-шаблонизатор, вы можете разделить логику и представление, но наглядно это продемонстрировать в рамках ответа на вопрос довольно трудно — на меленьких синтетических примерах преимущества увидеть сложно, а на то, чтобы «въехать» в более-менее крупный проект понадобится время (и мое, как объясняющего, и ваше), но ограничусь лишь таким аргументом — описание сущностей в виде блоков (компонентов) позволяет обращаться к ним не как к emmet-строке (формат pug-шаблонов),а как к логической сущности. Например, я могу описать сущность ссылки (блок
link) и дополнить её методом «хождения» в роутинг, после чего мои ссылки смогут автоматически генерировать свой href по набору параметров:
{
block: 'link',
to: 'article',
params: {
author: 'Realetive',
tags: ['bem']
}
}
К тому же BEMJSON — это JavaScript и там будут работать все возможности языка:
{
block: 'slider'
items: [ 'flower', 'heaven', 'forest', ].map( item => ({
elem: 'item',
imagePath: 'assets/img/slider/' + item + '.jpg'
}) )
}
И ещё (по себе знаю) — использование полного стека приводит к БЭМу головного мозга. Процесс необратимый, но негативного влияния пока не заметил, кроме разве что «
эффекта кёрнинга» — большую часть кода вы автоматически будете раскладывать на подобие блоков, элементов и модификаторов.
