- PVSM.RU - https://www.pvsm.ru -
Генератор будет полезен для тех, кто верстает статические страницы.
Инструмент написан на JavaScript, и, следуя методологии БЭМ [1], каркас формируется только на основе классов.
Работает просто: на вход получает HTML, на выходе отдаёт CSS.
Попробовать в действии можно на демонстрационной страничке [2], оформление настраивается по вкусу.
Иногда приходится по-быстрому сверстать страничку. Обычно у меня процесс состоит из следующих этапов:
Второй пункт хочется исключить, потому что это механическая работа. Автоматизируй!
Кроме использования в онлайне, скриптом можно воспользоваться прямо на собственной страничке.
Для этого достаточно подключить один файл [3].
<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 [4].
Автор: tenorok
Источник [5]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/html/46203
Ссылки в тексте:
[1] БЭМ: http://ru.bem.info/
[2] демонстрационной страничке: http://tenorok.github.io/autoclassCSS/
[3] один файл: https://raw.github.com/tenorok/autoclassCSS/b16bcf37ecb9cbd2f6fd72303c7fd2afc1b78b0e/autoclasscss.js
[4] собрана на основе JSDoc: http://tenorok.github.io/autoclassCSS/jsdoc/index.html
[5] Источник: http://habrahabr.ru/post/198420/
Нажмите здесь для печати.