Существуют ли агрессивные инструменты минимизации CSS?

Question

Мне интересно, знает ли кто-нибудь инструмент, который будет агрессивно переписывать CSS для более эффективного сжатия стилей. например Я хотел бы:

.foo { color : red; font-size: 16px; height: 20px; }
.bar { color : red; font-size: 16px; height: 30px; }

сжать до:

.foo, .bar { color : red; font-size : 16px; }
.foo { height : 20px; }
.bar { height : 30px; }

Для ясности, все известные мне минификаторы, такие как YUI Compressor, удаляют только пробелы и, возможно, объединяют несколько свойств (например, font-family и font-size в font). Я ищу что-то, что готово полностью переписать структуру файла.

Если не считать того, что кто-то знает о какой-либо работе, проделанной в отношении логики сжатия, стоящей за этим, эта информация будет принята с благодарностью. Я подумываю о том, чтобы написать свой собственный, если я не смогу его найти, но нужно учесть миллион вещей, таких как margin-top перезапись части margin, специфичность селектора и порядок включения, и т. Д. И т. Д. И т. Д. ... Затем работа по эффективному сжатию информации, например, будет ли эффективнее повторять селектор или свойство?

Answer 1

Я не знаю ни одного агрессивного инструмента минимизации CSS, но вы могли бы использовать следующий подход:

Настройка

1. Расширьте свой CSS (margin:1px 0 0 0; до margin-top:1px; margin-left:0px; ...).
2. Построить граф G = (V, E) с V как множество вершин и E как множество ребер:
   • V состоит из соединения двух наборов A (уникальные селекторы, например, div, p > span, #myid) и B (уникальные свойства, например, display:block;, color:#deadbeef;).
   • E состоит из всех ассоциаций между селектором (в A) и свойством (в B).
3. Используйте соответствующую весовую функцию c для ваших элементов в b. Это может быть число соседей данного элемента b или accumulated lenght of properties - accumulated length of selectors. Ваш выбор.

Вы можете заметить, что при использовании этого подхода вы получите двудольный граф. Теперь попробуйте следующий жадный алгоритм (псевдокод):

Алгоритм

1. Возьмите элемент b в B , который имеет максимальный вес, и добавьте его в пустой набор Z
2. Проверьте, имеет ли другой элемент d в B тот же вес
   • если такой d существует, проверьте, охватывает ли он те же селекторы.
     1. Если d охватывает те же селекторы: добавьте d к Z и перейдите к шагу 2.
     2. , если d не покрывает одинаковые селекторы, проверьте следующий элемент с таким же весом или перейдите к шагу 3, если вы отметили все элементы d .
3. Теперь Z - это набор свойств, охватывающий некоторые селекторы. Разобрать это как CSS в буфер.
4. Удалите все элементы в Z и их смежные ребра в G и удалите Z сам.
5. Если B не пусто, перейти к шагу 1.
6. Ваш буфер содержит предварительно минимизированный код CSS. Теперь вы можете объединить некоторые свойства (например, margin-top:0px;margin-left:1px).

Примечания

Обратите внимание, что фактическое сжатие зависит от вашей весовой функции. Поскольку это жадный алгоритм, он, вероятно, вернет минимизированный CSS, но я верю, что кто-то опубликует контрпример. Также обратите внимание, что вам нужно обновить весовую функцию после удаления элементов в Z .

Оценка времени выполнения

Алгоритм всегда завершается и будет работать в O (|B|^2*|A|), если я не ошибаюсь. Если вы используете кучу и сортируете свойства в каждом списке смежности (время установки O (|B|*|A|log(|A|))), вы получите O (|B|*|A|* (log(|B|)+log(|A|))).

Answer 2

CSS Tidy работает как чемпион!

• цвета, такие как «черный» или rgb (0,0,0), преобразуются в # 000000 или, скорее, в # 000, если это возможно.
• Некоторые шестнадцатеричные коды заменяются именами цветов, если они короче.
• a {property: x; property: y;} становится {property: y;}
• (все повторяющиеся свойства объединены) поле: 1px 1px 1px 1px;становится наценкой: 1px;
• поле: 0px;становится наценкой: 0;
• a {margin-top: 10px;край дно: 10px;Левое поле: 10px;margin-right: 10px;} становится
• a {margin: 10px;}
• margin: 010.0px;становится наценкой: 10px;
• все ненужные пробелы удаляются
• в зависимости от уровня сжатия все свойства фона объединяются
• удаляются все комментарии
• последняя точка с запятой в каждомблок может быть удален
• добавлены пропущенные точки с запятой
• исправлены неправильные символы новой строки в строках
• добавлены пропущенные единицы
• плохие цвета (и названия цветов)исправлено
• свойство: значение!важный;становится свойством: значение! важно;

Answer 3

Вы видели Компрессор YUI ?

Answer 4

Проект под названием CSS Tools претендует на это.

Answer 5

Вы также можете использовать http://www.minifycss.com/css-compressor/ или http://www.ventio.se/tools/minify-css/