Подтвердить что ты не робот

Существуют ли какие-либо агрессивные инструменты для оптимизации CSS?

Мне интересно, знает ли кто-нибудь об инструменте, который будет агрессивно переписывать 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; }

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

Настройка

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

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

Алгоритм

  • Возьмем элемент b из B с максимальным весом и добавим его к пустующему набору Z
  • Проверьте, имеет ли другой элемент d в B такой же вес
    • если такой d существует, проверьте, покрывает ли он одни и те же селекторы.
      • Если d охватывает одни и те же селекторы: добавьте d в Z и перейдите к шагу 2.
      • Если d не охватывает одни и те же селекторы, проверьте следующий элемент с тем же весом или перейдите к шагу 3, если вы проверили все элементы d.
  • Теперь Z - набор свойств, охватывающий некоторые селекторы. Разберите это как CSS в буфер.
  • Удалить все элементы в Z и их смежные ребра в G и удалить Z.
  • Если B не пусто, перейдите к шагу 1.
  • В вашем буфере содержится предварительно определенный код 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|))).

Ответ 2

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

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

Ответ 5

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