AutoclassCSS — быстрый каркас на основе HTML

Генератор будет полезен для тех, кто верстает статические страницы.
Инструмент написан на JavaScript, и, следуя методологии БЭМ, каркас формируется только на основе классов.
Работает просто: на вход получает HTML, на выходе отдаёт CSS.

Попробовать в действии можно на демонстрационной страничке, оформление настраивается по вкусу.


Иногда приходится по-быстрому сверстать страничку. Обычно у меня процесс состоит из следующих этапов:

1. пишу HTML (в уме продумываю для него CSS)
2. копирую все классы из написанного HTML в CSS-файл
3. пишу CSS-стили

Второй пункт хочется исключить, потому что это механическая работа. Автоматизируй!

Кроме использования в онлайне, скриптом можно воспользоваться прямо на собственной страничке.

Для этого достаточно подключить один файл.

<script src="autoclasscss.js"></script>

При создании экземпляра AutoclassCSS можно сразу передать HTML.

var autoclass = new Autoclasscss('<div class"block">...</div>');

Или в последующем задать/поменять обрабатываемый HTML.

var autoclass = new Autoclasscss();
autoclass.set('<div class"block">...</div>');

Для получения результирующей строки достаточно воспользоваться методом get.

var css = autoclass.get();

Кроме того, можно настроить внешний вид конечного результата. Для этого предусмотрен ряд методов.

autoclass
    .brace('newline')             // Способ отображения открывающей скобки, по умолчанию — через пробел после селектора
    .flat(true)                   // Плоский список селекторов, не устанавливать отступы по иерархии вложенности
    .ignore(['class1', 'class2']) // Добавление игнорируемых классов
    .indent('tabs')               // Устанавливать отступы табами, по умолчанию — четырьмя пробелами
    .inner(false)                 // Не добавлять отступ внутри фигурных скобок
    .line(true)                   // Отбивать селекторы пустой строкой
    .tag(true);                   // Указывать теги

Все методы удобно записываются цепочкой, более подробная документация собрана на основе JSDoc.