tenorok/autoclasscss

Формирование базового каркаса CSS-файла

AutoclassCSS

Инструмент для формирования каркаса из CSS-селекторов на основании полученного HTML по БЭМ-методологии.

Можно использовать AutoclassCSS онлайн.

Документация на основе JSDoc.

Использование

Подключение

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

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

Создание экземпляра

Создание экземпляра без параметров.

var autoclass = new Autoclasscss();

Можно сразу передать HTML, который следует обработать.

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

Дополнительно, конструктор принимает объект опций.

var autoclass = new Autoclasscss('<div class"block">...</div>', {
    brace: 'newline',
    ...
    indent: ['tabs', 2]
});

Так же, конструктор способен принимать только опции, а обрабатываемый HTML можно указать позже.

var autoclass = new Autoclasscss({
    brace: 'newline',
    ...
    indent: ['tabs', 2]
}).set('<div class"block">...</div>');

Получение CSS-каркаса

Для получения результата, достаточно вызвать метод get().

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

Опции

Стандартные значения

Опции можно указать в виде объекта при создании экземпляра.

new Autoclasscss({
    brace: 'default',
    flat: false,
    ignore: false,
    indent: ['spaces', 4],
    inner: true,
    line: false,
    tag: false
});

Так же, опции можно изменять с помощью одноимённых методов.

new Autoclasscss()
    .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].

Принимает один или два аргумента:

1. Обязательный, 'tabs' или 'spaces' — символ отступа
2. 1 — количество символов в одном отступе

Опция inner

Добавлять или не добавлять отступы внутри фигурных скобок.

Значение по умолчанию: true.

Принимает true или false.

Опция line

Отбивка селекторов пустой строкой.

Значение по умолчанию: false.

Принимает один или два аргумента:

1. Обязательный, true или false — отбивать или не отбивать
2. 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

autoclasscss's Issues

Добавить возможность использовать регулярное выражение в опции ignore

Часто, удобно вместо списка игнорируемых классов написать регулярное выражение.

Добавить возможность указывать опции в виде объекта

Не всегда удобно назначать опции отдельными методами.

Нужно сделать так, чтобы конструктор мог принимать различные комбинации параметров.

Без параметров:

new Autoclasscss()

HTML для формирование каркаса:

new Autoclasscss('<html>')

Объект опций:

new Autoclasscss({ options: values })

HTML и объект опций:

new Autoclasscss('<html>', { options: values })

Save each block as separate file

Было бы отлично иметь возможность через cli сохранять код в виде отдельных файлов. Отдельный файл для каждого блока. Имя файла = имя блока.

Естественно, не создавать файлы для дочерних элементов и модификаторов.

Добавить CLI

Веб интерфейса и JS-API не достаточно для комфортного и эффективного использования инструмента.