CSSO (CSS Optimizer) — структурная минимизация CSS

В IE 8.0 не работает.

Он может что-то большее чем:
www.codebeautifier.com

Глупый он у вас какой-то получился. Сломался на первом же примере:

a [title="1px"]{color:red;}

И что за мода пошла выкладывать на показ бетки… Вы сделайте нормальный, рабочий продукт и показывайте тогда.

А как он относится к использованию хаков в css?

Ужал с 59 до 38 Кб. Неплохо.

А серверный вариант будет, к примеру на пэхэпэ?

В сравнении с www.codebeautifier.com в вашем интерфейсе вообще не понял оптимизировалось чего или нет, строки склеились, а процент сжатия не показывает. Баг? FF4.

Покажите цифры в процентах, помнится фанател оптимизацией на проекте, где ставили жесткие требования по нагрузке — пришел к выводу, что обработка форматирования css — самое неэффективное из всего возможного, оставил оригинальные не обработанные файлы.
а по сравнению с отдачей в gzip выигрыш был еще менее заметен (буквально пару килобайт на 1500 строк css).

Чем он лучше CssTidy?

Давайте на всего одном примере: что вы будете делать, когда в полный рост поднимутся CSS3 media queries? Предлагаю проверить вот такое:

@media screen and (min-width: 400px) and (max-width: 700px) { a { color:red } }

Данный подход даст выигрыш далеко не всегда.

Проверил, прогнал сжатый YUICompressor'ом css-файл с рабочего проекта (весил 65783 байт). После структурной оптимизации он стал весить 64124, итого 1659 байт экономии (2,5%).

Но если учесть, что css гзипуется, то вместо выигрыша, теряем сотню байт: 11833 байта против 11941.
Файлы с примерами

Начало хорошее, не забрасывайте.

Хочу ещё дать один пример:

.class
{
    border-top:1px solid #000;
    border-right:2px dashed #111;
    border-bottom:3px dotted #222;
    border-left:4px double #333;
}

…можно оптимизировать до:

.class
{
    border-width:1px 2px 3px 4px;
    border-style:solid dashed dotted double;
    border-color:#000 #111 #222 #333;
}

…и соответственно ещё уменьшить, если некоторые размеры, стили или цвета совпадают. Например:

.class
{
    border-top:1px solid #000;
    border-right:2px solid #111;
    border-bottom:1px solid #222;
    border-left:2px solid #111;
}

…можно оптимизировать до:

.class
{
    border-width:1px 2px;
    border-style:solid;
    border-color:#000 #111 #222;
}

Так на вскидку пример не может прийти в голову, но мне кажется, что группировка селекторов в ряде случаев будет гробить верстку. По этому в ряде случаев этот процесс сложно автоматизировать. К тому же при gzip разница вообще будет будет мизерной.

И еще, порой (когда длинна селектора превосходит длину перемещаемого свойства) группировка увеличивает объем, а не уменьшает его.

Из командной строки под win не пашет.
1) __dirname под win использует виндовый backslash, так-что файл «csso\lib\csso.js» printFile должен быть таким:

function printFile(filename) {
    // Не пашет под виндой:
    // print(fs.readFileSync(__dirname.slice(0, __dirname.lastIndexOf('/')) + '/' + filename).toString());
    // пашет под виндой:
    // print(fs.readFileSync(__dirname + '/../' + filename).toString());
    // пашет под виндой:
    print(fs.readFileSync(__dirname.replace(/[\\/][^\\/]+$/, '/' + filename)).toString());
}

2) виндовый dirname (dirname.exe, по крайней мере из популярного пака UnxUtils) не понимает «--», ругается («too many arguments») на конструкцию: $(dirname — "$0")
Такой вариант проще и работает под win:

#!/usr/bin/env bash
CSSO_HOME=$(dirname $0)
node "$CSSO_HOME/../lib/csso.js" $@

либо можно сменить батник csso.cmd на такой:

@IF EXIST "%~dp0\node.exe" (
  "%~dp0\node.exe" "%~dp0\node_modules\csso\lib\csso.js" %*
) ELSE (
  node "%~dp0\node_modules\csso\lib\csso.js" %*
)

<парсер кретин>который заменил два минуса на длинное тире</парсер кретин>