Инициализация БЭМ-блоков в CSS

17 июня 2013 г. #верстка, #node.js

Все верстают по-разному. Кто-то пишет одновременно HTML и CSS, кто-то сначала всю разметку, а потом уже стили. Мне больше нравится верстать блоками, это что-то среднее между описанными подходами.

Некоторое время назад я изучал опыт Юры Артюха в данном направлении, но решение мне не подошло. Для упрощения задачи я написал свой скрипт getBemClasses.js. Он позволяет с помощью одной команды в терминале получить из HTML селекторы блока, которые затем можно вставить в CSS.

Вот пример его использования:

$ node getbemclasses.js path/to/file.html post

Первый аргумент это HTML-файл-источник, второй — имя класса блока, который надо инициализировать. Скрипт найдет в документе сам блок, а так же его элементы и модификаторы. Результат сортирует, форматирует и выведет в консоль примерно так:

.post {

}
  .post__title {

  }
  .post__content {

  }
  .post__comments {

  }
.post._modifier {

}

Это всего лишь прототип. Мне не очень нравится идея копировать руками из консоли, но удобного кроссплатформенного решения этой проблемы я не придумал. Может быть вы что-то подскажете? По этому поводу пишите в issues на GitHub.