CSSO (CSS Optimizer) является минимизатором CSS, выполняющим как минимизацию без изменения структуры, так и структурную минимизацию с целью получить как можно меньший текст.
CSSO написан на Javascript, выполняется как в браузере, так и в командной строке (с помощью NodeJS).
Распространяется под лицензией MIT.
Минимизация без изменения структуры:
Ссылки:
Большинство из современных популярных минимизаторов (YUICompressor и ему подобные) — это минимизация без разбора и анализа структуры. Грубо говоря, набором regexp'ов заменяют X на меньший Y.
Пример:
Обработка regexp'ами:
Обработка с минимизацией структуры:
Вот такая получается разница. И если на небольших и вручную минимизированных CSS выгода не так уж очевидна, то на автоматически созданных таблицах стилях выигрыш может составлять килобайты.
PS. Документация и даже JsDoc на русском языке. Будет и английский.
CSSO написан на Javascript, выполняется как в браузере, так и в командной строке (с помощью NodeJS).
Распространяется под лицензией MIT.
Что умеет
Минимизация без изменения структуры:
- Удаление whitespace
- Удаление концевых ‘;’
- Удаление комментариев
- Удаление неправильных charset и import
- Удаление ошибочных элементов
- Минимизация цвета
- Минимизация 0
- Минимизация margin и padding
- Слияние многострочных строк в однострочные
- Минимизация font-weight
- Слияние блоков с одинаковыми селекторами
- Удаление перекрываемых свойств
- Частичное выделение свойств в отдельный блок
- Частичное слияние блоков
Где найти
Ссылки:
- Вебовый интерфейс для тестов и проб: anotherfelix.com/csso/web/csso.html
- Репозиторий исходного кода: github.com/afelix/csso
- Руководство по установке: github.com/afelix/csso/blob/master/README.md
- Описание минимизации CSS: github.com/afelix/csso/blob/master/MANUAL.ru.md
Зачем ещё один минимизатор
Большинство из современных популярных минимизаторов (YUICompressor и ему подобные) — это минимизация без разбора и анализа структуры. Грубо говоря, набором regexp'ов заменяют X на меньший Y.
Пример:
.test { color: red }
.test { color: green }
Обработка regexp'ами:
.test{color:red}.test{color:green}
Обработка с минимизацией структуры:
.test{color:green}
Вот такая получается разница. И если на небольших и вручную минимизированных CSS выгода не так уж очевидна, то на автоматически созданных таблицах стилях выигрыш может составлять килобайты.
PS. Документация и даже JsDoc на русском языке. Будет и английский.