Существует ли улучшенный минификатор / компилятор CSS, который разделяет лишние полосы и запятую, разделяя идентичные правила?

Question

Например,

input{margin:0}body{margin:0;background:white}

было бы написано короче так:

input,body{margin:0}body{background:white}

или это

input,body{margin:0}body{margin:0;padding:0}

было бы короче написано так

input,body{margin:0}body{padding:0}

Заключение такого инструмента нет См. Принятый ответ.

Совет авторам инструментов , вы можете хочу рассмотреть gzip.Иногда, оставляя несколько байтов для оптимизации второго уровня, в конечном итоге будет меньше, потому что gzip - это, по сути, дедупликация на уровне байтов.Если есть два одинаковых раздела, gzip будет ссылаться на предыдущий. В идеале это будет учитываться при принятии решения о том, следует ли пропускать определенные оптимизации в течение некоторого времени или все время, и в каком порядке должны быть селекторы и правила.

Answer 1

Это можно сделать с помощью CSSO .

Рассмотрим следующий ввод:

input{margin:0}body{margin:0;background:white}

Выход CSSO:

input,body{margin:0}body{background:#fff}

(именно то, что вы ищете)

Но, к сожалению, CSSO оптимизирует это:

.dont-care {
    background-image: url("images/chart.png");
    background-repeat: no-repeat;
}

Кому:

.dont-care{background-image:url("images/chart.png");background-repeat:no-repeat}

Однако CSSTidy преобразует вышеуказанное в соответствующее сокращенное свойство:

.dont-care {
    background:url("images/chart.png") no-repeat;
}

Семь Четыре шага решения для оптимизации CSS:

Вот практика, которой я следую:

1. Объединить CSS-файлы в all.css.
2. Поставка на CSSO вход.
3. Удар Свернуть
4. Вставить вывод в all.min.css

За исключением оплаты @Grillz, чтобы сделать это вручную, я пока не нашел лучшего предложения по оптимизации CSS ..

А как насчет старых хаков IE?

Если вы используете хаки CSS для IE6 и 7, CSSO сохранит хаки.

Например:

.dont-care {
    background-image: url("images/chart.png");
    *background-image: url("images/chart.jpg");
    background-repeat: no-repeat;
}

CSSO вывод:

.dont-care{background-image:url("images/chart.png");*background-image:url("images/chart.jpg");background-repeat:no-repeat}

CSSTidy будет игнорировать звездочку (* хак, используемый для IE6) и выводит:

.dont-care {
    background:url("images/chart.jpg") no-repeat;
}

Вы также можете избежать взлома и использовать отдельный файл CSS для более старых версий IE (скажем, all.oldIE.css). После оптимизации (используя 7 шагов, описанных ранее) обоих файлов по отдельности, это то, что вы можете использовать в теге вашего HTML / masterpage / template / layout file в конечном итоге:

<!--[if lt IE 8]><link href="css/all.oldIE.min.css" rel="stylesheet" type="text/css"/><![endif]--> 
<!--[if gt IE 7]><!--><link href="css/all.min.css" rel="stylesheet" type="text/css"/><!--<![endif]-->

, где all.min.css будет работать для всех браузеров, кроме версий IE, меньших и равных 7. Но безопаснее всего использовать только CSSO.

Обновление

Пропустить часть CSSTidy. CSSO делает безопасную оптимизацию. По словам их разработчика , сокращенная оптимизация небезопасна:

Рассмотрим пример:

.a{
    background-attachment: fixed;
}
.b {
    background-image: url("images/chart.png");
    background-repeat: no-repeat;
}

и если у вас будет <div class="a b"></div> - элемент с обоими классы, вы не можете оптимизировать .b, как вы пишете, потому что это будет переопределить background-attachment, установленный в .a.
Так что нет, это не безопасная оптимизация.

Answer 2

Я бы порекомендовал https://www.npmjs.com/package/gulp-clean-css

, если у вас нет проблем с использованием gulp, он работает именно так, как вы хотите

Answer 3

попробуйте LESS.

LESS автоматически распознает, когда вы сохраните файл *.less, немедленно скомпилирует ваш CSS-код и будет уменьшен.Вы можете создать столько файлов, сколько захотите, и LESS будет наблюдать их все для запуска компиляции.

Вы будете работать только с файлами .less.Инструмент автоматически скомпилирует и сохранит ваши файлы как .css

http://lesscss.org/

Answer 4

Посмотрите на CSS Tidy, он может объединить: http://csstidy.sourceforge.net/

Answer 5

Если вы используете Visual Studio, вы можете установить расширение Web Essentials . Она имеет экспериментальная поддержка очистки и объединения правил CSS, но не совсем так, как вы подписались. Например, он создает больше пробелов, но объединяет теги CSS, которые имеют (частично) одинаковые стили, например ..

Answer 6

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

https://github.com/acwtools/accss

и также имеет лучшую степень сжатия

Answer 7

Там их несколько.Некоторые из лучших:

http://refresh -sf.com / yui /

http://www.minifycss.com/css-compressor/

Второй группирует правила, которыесовпадать также и многое другое.

Answer 8

вы пробовали less.js ? Вы можете написать код CSS в объектно-ориентированном виде, также вы можете использовать эту платформу либо на стороне клиента, либо на стороне сервера, ниже демонстрации для вашего случая:

/* you can write you desired css as follows */
body {
  &input {
        margin: 0;
  }
  background:white;
}

и он будет автоматически скомпилирован в:

body, input {
    margin:0;
}

body {
    background:white;
}

Answer 9

Нет, не существует такого инструмента, который оптимизирует до уровня, который вы спрашиваете (по крайней мере, я в курсе), и я не уверен, что вы захотите использовать его, если он был.Причина в том, что нет ничего сложного в поиске наименьшего возможного уменьшенного кода CSS.Для предоставленного вами простого CSS-кода это легко.Но представьте, что делаете это на CSS-блоке размером 300 КБ.Это не тривиально.И стоит ли тратить время процессора на его генерацию (может быть, если вы кешируете результаты, но не будет, если вы динамически его обслуживаете)?

И в чем выгода?Экономия не более нескольких процентов на переводе?Если у вас нет трафика на уровне Facebook, вы не собираетесь экономить большую пропускную способность.И несколько процентов также не окажут значительного влияния на ваших пользователей (даже через коммутируемое соединение, передача нескольких килобайт не так уж и плохо).

Просто используйте стандартный компрессор ( minify , YUI Compressor и т. Д.) И покончим с этим.Вместо этого беспокойтесь о низко висящих фруктах.Легко исправить проблемы ...

Answer 10

Может быть не так, но h ttp: //www.cleancss.com/?