AutoclassCSS
Инструмент для формирования каркаса из CSS-селекторов на основании полученного HTML по БЭМ-методологии.
Можно использовать AutoclassCSS онлайн.
Документация на основе JSDoc.
Использование
Подключение
Достаточно подключить один файл.
Создание экземпляра
Создание экземпляра без параметров.
var autoclass = ;
Можно сразу передать HTML, который следует обработать.
var autoclass = '<div class"block">...</div>';
Дополнительно, конструктор принимает объект опций.
var autoclass = '<div class"block">...</div>' brace: 'newline' ... indent: 'tabs' 2;
Так же, конструктор способен принимать только опции, а обрабатываемый HTML можно указать позже.
var autoclass = brace: 'newline' ... indent: 'tabs' 2;
Получение CSS-каркаса
Для получения результата, достаточно вызвать метод get()
.
var css = '<div class"block">...</div>';
Опции
Стандартные значения
Опции можно указать в виде объекта при создании экземпляра.
brace: 'default' flat: false ignore: false indent: 'spaces' 4 inner: true line: false tag: false;
Так же, опции можно изменять с помощью одноимённых методов.
;
brace
Опция Способ отображения открывающей скобки.
Значение по умолчанию: 'default'
.
Принимает одно из следующих значений:
'default'
— через пробел после селектора'newline'
— на новой строке под селектором
flat
Опция Установление плоского или вложенного списка селекторов.
Значение по умолчанию: true
.
Принимает true
или false
.
ignore
Опция Указание игнорируемых классов.
Значение по умолчанию: false
.
Принимает параметр в разном виде:
'class'
— добавить игнорируемый класс['class1', 'class2']
— добавить несколько игнорируемых классов/i\-.+/
— игнорировать классы по регулярному выражениюfalse
— очистить список игнорируемых классов
indent
Опция Настройка отступов.
Значение по умолчанию: ['spaces', 4]
.
Принимает один или два аргумента:
- Обязательный,
'tabs'
или'spaces'
— символ отступа 1
— количество символов в одном отступе
inner
Опция Добавлять или не добавлять отступы внутри фигурных скобок.
Значение по умолчанию: true
.
Принимает true
или false
.
line
Опция Отбивка селекторов пустой строкой.
Значение по умолчанию: false
.
Принимает один или два аргумента:
- Обязательный,
true
илиfalse
— отбивать или не отбивать 1
— количество строк для отбива
tag
Опция Указание тега в селекторе.
Значение по умолчанию: false
.
Принимает параметр в разном виде:
true
илиfalse
— указывать или не указывать все теги'div'
— указывать тегdiv
['ul', 'li']
— указывать теги ul и li
Методы
set
Метод Устанавливает HTML-разметку к обработке.
В качестве параметра принимает строку с HTML-разметкой.
get
Метод Возвращает CSS-каркас на основе заданной HTML-разметки.
CLI
Установить из NPM.
npm install autoclasscss
Получить CSS-каркас из HTML-файла.
./bin/autoclasscss index.html
Сформировать CSS-каркас с заданными опциями и сохранить результат в файл. Файл опций удобно хранить в JSON-формате. Файл для сохранения результата создастся автоматически.
./bin/autoclasscss -o options.json -s save.css index.html
Разработка
Для разработки требуется node.js и npm. В проекте используется пакетный менеджер bower.
Клиентские тесты написаны на Jasmine, для прогона всех тестов, надо открыть страницу test/test.html.
Цели
Установить зависимости.
make install
Запустить тесты CLI. Написаны на Mocha
make test
Сгенерировать документация на основе JSDoc.
make doc
Обновить gh-pages.
make gh-pages