По ходу изучения БЭМ методологии лично у меня возник целый ряд непонятных и даже на первый взгляд нелогичных моментов. Однако проявив терпение и изрядно покопавшись в форумах и разного обсуждениях я нашёл ответ на свои вопросы, что и хочу изложить в данной статье, чтобы не наступать лишний раз на грабли.
Как ни парадоксально, но основной источник проблем с пониманием БЭМ методологии это собственно документация к проекту, а так-же большинство туториалов и гайдов. Все эти материалы по моему мнению неверно расставляют акценты на различных аспектах методологии, что в конечном итоге приводит к в корне неверному пониманию работы этого стека технологий.
Не буду лишний раз рассказывать, что такое БЭМ — на эту тему достаточно материалов в сети. Речь пойдёт прежде всего о БЭМ как полном стэке технологий.
Что-же не так с этим БЭМ-ом?
Большинство гайдов как например небезызвестная статья Сайт с нуля на полном стеке БЭМ-технологий, да и многие другие материалы демонстрируют нам как ловко добавляя в bemjson блоки мы получаем требуемый результат. Действительно верстать блоками, вместо HTML тэгов гораздо продуктивнее. Но рано или поздно возникает ряд вопросов.
Почему JSON?
Начиная создавать структуру сайта в bemjson скоро становится понятно, что развесистое json-дерево крайне неудобно воспринимать визуально из-за обилия запятых и скобочек и ещё менее удобно перемещать блоки опять-же из-за тех самых скобочек и запятых. Одна запятая не в том месте и получаем ошибку и надо как-то найти где в этой каше находится тот самый неверный блок. Масла в огонь подливает бесполезность сообщений об ошибках БЭМ-а, в которых отсутствует информация где хотя бы приблизительно искать проблему.
Ну и естественно возникает вопрос — почему был выбран именно JSON? И неужели в Яндэксе принято так страдать? JSON хорош как формат данных для JS кода, но отнюдь не для ручного редактирования. Опять же непонятно зачем в bemjson-е добавлять элементы (БЭМ элементы) — они-же вроде как являются внутренностями блока, но не добавив их в bemjson как тогда матчить на них bemhtml?
Почему bemjson только для бандлов?
Ещё одним моментом вызывавшим недоумение было отсутствие поддержки блоками bemjson`. Казалось бы логично было бы если бы блоки можно было описывать через bemjson. Но почему-то bemjson`` используется только для описания структуры бандла.
Как избежать повторения кода?
Вторая проблема с которой я столкнулся это невозможность избежать повторения кода. Практически все руководства, что я видел работаю в контексте одного бандла, поэтому такой проблемы не возникает. Но закончив одну страницу я решил сделать следующую и вполне логично, что это должен быть другой бандл. А новый бандл это новый bemjson. А так как большинство страниц имеют большое количество повторяющегося кода (шапка, сайдбар, футер и т. п.) то получается, что в каждом bemjson-е мы должны повторять эту структуру.
Отсюда следует, что если в проекте у нас десяток бандлов (разных типов страниц), то соответственно столько-же и bemjson-ов, которые на ¾ одинаковые. И если что-то надо поменять в общей структуре то придётся вручную перелопатить каждый bemjson-файл. В чём же тогда выгода о БЭМ, который как известно славится тем, что переопределить можно всё и везде? Получается, что и не всё и не везде, а в одном месте гибко и удобно, а в другом криво и через задницу.
Логичным выходом их этой ситуации было бы вынести весь код в bemhtml, но развивая эту идею мы получим, что bemjson вырождается в один единственный блок. Но это идёт в разрез со всеми обучающими материалами, в которых используется именно bemjson.
Да лааадно чувак — ты просто протупил
Как бы ни так. Судя по форуму БЭМ, гитхабу и гуглению/яндэксению такие вопорсы и непонятки возникают у многих (как минимум вот полный боли крик души ещё одного не осилившего). Более того люди выдумываю какие-то свои парсеры и генераторы, чтобы упростить/автоматизировать формирование bemjson-а. А всё потому, что второстепенная вещь которой является bemjson выставляется как first-class citizen, что выворачивает всю технологию наизнанку.
Что делать?
Как оказалось последнее предположение как раз и верное, но не совсем. Самое обидное, что вся информация есть в документации. Но всё так запутано и акценты расставлены так, что понять это крайне сложно. Впечатление создаётся именно, что bemjson и есть основной файл с которым мы работаем.
Однако это не так!!! Самое важное правило бойцовского клуба БЭМ разработчика — никогда не пиши bemjson руками. В этом нехитром правиле глубинный смысл БЭМ-а. Если хочешь постигнуть БЭМ-дзэн — просто следуй этому правилу.
Стоп-стоп — как-же без bemjson-а?
Казалось бы если нет bemjson-а — куда тогда матчить bemhtml шаблоны? А вся штука в том, что bemjson это внутренний формат БЭМ стэка для хранения структуры страницы. И он генерируется с помошью технологии bemtree. Ключевое слово генерируется. Ещё раз повторюсь — не надо заморачиваться с этим bemjson-ом. И лучше про него позабыть и рассматривать дерево блоков как абстрактное дерево без привязки к физической структуре.
Просто для аналогии — нам же не важно как физически хранятся данные в нашей любимой СУБД. Мы просто знаем синтаксис SQL и этого достаточно — мы оперируем данными без привязки к физической схеме их хранения.
Критикуешь — предлагай
Собственно разработчика вообще не должно касаться, что там за формат внутри — я просто должен пихать блоки в некое дерево, а как оно там внутри хранится в json-е, xml-е или в каком-то бинарном формате меня не касается.
Как уже выше писал — полная аналогия с базами данных. Я должен знать SQL, а не формат файла хранения даных на диске или формат обмена клиент-сервер.
Так же и с БЭМ — я должен знать как работать с абстрактным деревом блоков. Знать некий API для этого, а не внутренний промежуточный формат хранения этих данных. Это (API вместо bemjson-а) кстати позволило бы легче портировать БЭМ стэк на другие языки (но это уже так — фантазии на тему).
Это мне кажется так же упростило бы понимание БЭМ как технологии. Мы просто матчимся на дерево — без привязки к bemjson. Во это неявное присутствие bemjson в документации и гайдах оно на самом деле отвлекает от сути. Постоянно пытаешься мыслить в контексте этого json файла, а не дерева.
Ну и как тогда пользоваться этим вашим БЭМ-ом?
На самом деле вся суть изложена тут Трехзвенная архитектура в БЭМ. Но почему-то она подана как некий level up, как какой-то расширенный вариант для продвинутых. На мой взгляд то, что описано в этой статье это единственно правильный и возможный вариант использования БЭМ стэка.
Сначала с помощью BEMTREE мы генерируем дерево блоков (можно на основе данных, а можно и без). Именно тут у нас внутри появляется тот самый bemjson. Затем из этого дерева мы с помощью BEMHTML генерируем HTML и всё остальное (CSS, JS, документацию и пр.)
Заключение
Вышло несколько сумбурно. Хочется рассказать более понятно и полно. В формат одной статьи уложиться не получится. Тема довольно обширная. Поэтому планирую выпустить ряд уроков где на примере реального проекта попробую показать по шагам как всё сделать правильно.
Комментарии