Мы подумали, что в БЭМ терминах можно выразить весь проект целиком.
В этом случае корень проекта становится уровнем со своими правилами именования. Например, правила такие, что блоки лежат на этом уровне плоским списком.
.bem/level.js/* файлы проекта */
Каждый уровень в корне проекта — уровни с блоками или бандлами (страницами) — это реализация соответствующего блока в технологиях blocks или bundles.
common.blocks/.bem/level.js/* блоки */touch.blocks/.bem/level.js/* блоки */touch.bundles/.bem/level.js/* бандлы */
Каждая подключаемая библиотека тоже может быть реализацией соответствующего блока в технологии lib.
bem-bl.lib/.bem/level.jsbemhtml.lib/.bem/level.js
Библиотека, в свою очередь, так же является уровнем-проектом. Получаем фрактальную вложенность.
В блоках могут лежать примеры и документация. Раньше мы складывали примеры в отдельную директорию examples/ в директории блока. В предлагаемой схеме мы можем считать, что примеры лежат на отдельном уровне, который является реализацией этого блока в технологии examples.
common.blocks/
.bem/
level.js
button/
button.css
button.bemhtml
button.examples/
01-basic/
01-basic.bemjson.js
Дополнительные переопределения для конкретного примера можно складывать в отдельный уровень, который является реализацией блока примера в технологии blocks. Снова фрактальность.
common.blocks/.bem/level.jsbutton/button.cssbutton.bemhtmlbutton.examples/01-basic/01-basic.blocks/.bem/level.js01-basic.bemjson.js
При таком подходе к организации кода примеров мы можем создавать примеры не только для блоков, но и для любых других БЭМ сущностей — элементов, модификаторов и их значений. А при генерации страницы с документацией показывать эти примеры контекстно по месту, рядом с описанием конкретной БЭМ сущности.
То же самое с общей документацией проекта. Можно располагать её на отдельном уровне, каждый документ представлять в виде отдельного блока, а каждый раздел документа — в виде элемента.
docs/
.bem/
level.js
tutorial/tutorial__intro.mdtutorial__step1.mdtutorial__step2.mdtutorial__step3.md
Если звучит сложно, представьте, что уровни — это папки, а БЭМ-сущности, выраженные в технологиях — это имена файлов с расширениями. Технология — это расширение, а БЭМ-сущность — это сложносоставное имя файла.
Если вы думаете о том, что поддерживать такую структуру руками будет непросто — у нас есть инструмент bem create, который как раз призван эту задачу решать. Например, создать проект можно так:
bem create -T project -b my-new-project
Создать уровни блоков и бандлов в проекте так:
bem create -T blocks -b common -b desktop
bem create -T bundles -b desktop
Аналогично с уровнями для примеров, файлов блоков и т.д.
Чтобы сократить эти команды, можно заводить алиасы в shell. Мы также думаем над тем, чтобы дать возможность заводить алиасы на уровне команды bem (как в git) как только для себя, так и для конкретного проекта или отдельного уровня.
Такой подход к описанию структуры всего проекта поможет нам упорядочить описание правил сборки для bem make / server, устранить некоторые несостыковки. Кроме этого, мы сможет автоматически делать интроспекцию всего проекта по файловой структуре, что поможет нам сделать такие инструменты, как bem ls, bem find и т.д.
А как вам такая структура?
Все правильно.
Батя одобряэ.
Молодцы Напоминает школу и математику, почему-то. А еще дельфи и vcl.
Я, с упорством нудного жирафа, все буду просить такие инструменты, как bem init, bem status, bem ls, ... некоторые из них уже в процессе переваривания, что не может не радовать.
Спасибо вам большое!
bem create -T project -b my-new-project
?
ну, с натяжкой "bem create -T project -b my-new-project" это mkdir my-new-project && cd my-new-project && bem init
bem create сложная для понимания, у неё много опций, она кажется вещью в себе и ею страшно пользоваться, если про бэм ничего не слышал. есть же git init, npm init, etc. когда проект уже есть, и в какой-то момент хочется в нем использовать бем делать bem create ..., mv * .../my-new-project/ не очень удобно, а если bem create может создать папку .bem в pwd и не затронуть все остальное — то это не очевидно (скорее наоборот)
Для полноценной работы с bem tools мне часто не хватает команды, которая бы показала все тонкие места, которые есть на текущий момент времени (или появились после внесения мной изменений, или до, а потом после, чтобы можно было сравнить: git clone, *hardwork*, bem status, git stash, bem status, git stash pop, git ci -am), но чтобы оформить это в виде команды нужны более глубокие знания bem tools. Ведь сборка происходит по правилам, описанным в самом проекте, поэтому у нас должна быть полная картинка, а раз она у нас должна быть, то мы можем сделать некое verify, или build в режиме dry-run с поиском потерянных зависимостей, или наоборот — их отстутствием, что тоже должно насторожить.
Upd: Ну и да, кроме этого если это build, то он не должен упасть, а все-таки, по возможности, доработать до конца и вывести все, что ему удалось поймать в человекочитаемом виде.
Калёво! Так и надо
Ждёмс тестового проектика со всем вышесказанным.
Спасибо
Как я понимаю, project-stub уже перешел на новую организации библиотеки. Подскажите, как указать сборку других страниц. кроме index. То есть
/project-stub/desktop.bundles/index
собирается, а допустим
/project-stub/desktop.bundles/other
нет?
Спасибо!
Должен собираться, если в этой директории есть other.bemjson.js или other.bemdecl.js файл.
Спасибо, все заработало , я по аналогии со статичным сайтом назвал его /other/index.bemjson.js, полагая, что /other/ == /other/index.html как на статичных html-сайтах. И ведь главное уже спотыкался об подобное , что недостаточно назвать папку, надо и сам файл bemjson.
У вас нет идеи сделать bemtools FAQ? С удовольствием бы поучавствовал.
Мы постоянного готовим новую документацию и выкладываем её на bem.info.
Но вот конкретно FAQ делать не планировали. Если сможете сделать какой-то стартовый FAQ, мы его с удовольствием опубликуем
http://alexbaumgertner.ya .ru/replies.xml?item_no=2 268
Только надо ошибки поправить, если есть
А опубликуйте для начала ссылку на эту статью в этот клуб? Через «Поделиться ссылкой».
Всё таки, это не формат вопрос-ответ, больше похоже на туториал.
Мы сейчас работаем как раз над одним на эту же примерно тему.
опубликовал
ох...
https://github.com/bem/be m-bl-posts/blob/master/fo llowing/how-to-start-with -bem-starter.part1.md