Форматирование и минификация CSS

Что такое форматтер CSS?#

Форматтер CSS делает две вещи, которые выглядят противоположно, но решают одну и ту же проблему: расширяет тесный, машинно-сгенерированный CSS до читаемого человеком вида и сжимает разросшийся стилевой файл до действительно нужных байт. Причина взяться за него почти всегда в том, что CSS пришёл не в той форме для вашей задачи — сборочный инструмент выдал одну минифицированную строку, а вам нужно изучить конкретное правило, или рукописный файл разросся и вы хотите его подсушить перед отправкой.

Страница обрабатывает оба направления настоящими движками. Форматировать использует css_beautify из js-beautify, который предсказуемо переформатирует отступы селекторов и деклараций. Сжать использует CSSO — настоящий структурный оптимизатор, а не «срезатель» пробелов: он объединяет смежные правила с одинаковыми декларациями, сворачивает длинные свойства в краткие, удаляет перекрытые декларации и лишь затем убирает оставшиеся пробелы. Результат обычно меньше, чем выдаёт наивный компрессор, и семантически эквивалентен входу. Это различие важно, когда в дело идут каждый байт по сети.

Как пользоваться#

1. Вставьте CSS в панель CSS слева. Пример загружает короткий стилевой файл, если сначала хотите попробовать поведение.
2. Выберите Отступ на панели инструментов: 2 пробела, 4 пробела или Табуляция. Два пробела — распространённая современная конвенция; четыре удобнее для чтения плотных файлов.
3. Нажмите действие:
   • Форматировать — переформатирует отступы и переносы строк через js-beautify. Селекторы уходят на свои строки, декларации выстраиваются внутри фигурных скобок.
   • Сжать — прогоняет структурную оптимизацию CSSO, затем выдаёт компактный выход. Комментарии удаляются, дублирующиеся правила сливаются, длинные свойства сворачиваются в краткие там, где это безопасно.
4. Прочитайте результат в панели Вывод и возьмите его через Копировать. Очистить сбрасывает обе панели.

Если во входе есть незакрытое правило или битая декларация, строка состояния сообщит об ошибке, а не будет гадать.

Ключевые возможности#

• Разные движки для форматирования и минификации. Beautify — это js-beautify; minify — CSSO. Каждый делает то, в чём силён, а не одна скомпрометированная процедура пытается угнаться за обоими.
• Настоящая оптимизация при минификации. CSSO перестраивает стилевой файл — объединяет .a { color: red } .b { color: red } в общее правило, сворачивает margin: 0 0 0 0 в margin: 0, удаляет декларацию, уже перекрытую более поздним правилом. Удаление пробелов — последний шаг, а не единственный.
• Три стиля отступов. 2 пробела, 4 пробела или табуляция — переключаются одним меню.
• Рядом, готово к копированию. Вход редактируем, выход только для чтения с копированием в один клик.
• Строго на стороне клиента. CSSO и js-beautify встроены в страницу и подгружаются только при открытии этого инструмента. Ваш стилевой файл обрабатывается в браузере и никуда не отправляется.

Разбор примера#

Небольшой стилевой файл, где два правила повторяют работу, а длинное свойство могло бы быть короче:

Ввод:

.card{padding:10px 10px 10px 10px;margin-top:10px;margin-right:10px;margin-bottom:10px;margin-left:10px}
.card .title{color:#ff0000}
.card .body{color:#ff0000}

Нажмите Форматировать с отступом 2 пробела:

.card {
  padding: 10px 10px 10px 10px;
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
}

.card .title {
  color: #ff0000;
}

.card .body {
  color: #ff0000;
}

Повтор теперь очевиден — именно для этого и нужен форматтер. Теперь нажмите Сжать на том же входе, и CSSO структурно перепишет его:

.card{padding:10px;margin:10px}.card .body,.card .title{color:red}

Сразу три вещи. Четырёхзначный padding свернулся в одно значение, потому что все четыре стороны равны; четыре длинных свойства margin-* сложились в краткую форму margin; а два правила color: #ff0000 слились в одно сгруппированным селектором (а hex превратился в более короткий red). Наивный «срезатель» пробелов оставил бы каждый байт избыточности — такие выигрыши находит только реструктурирующий оптимизатор.

FAQ#

Изменит ли минификация вид моей страницы?#

Нет, если вход — корректный CSS. CSSO применяет только те преобразования, что сохраняют каскад: объединение правил с одинаковыми декларациями, сворачивание длинных свойств с одинаковыми значениями, удаление деклараций, перекрытых более специфическим или более поздним правилом. Если преобразование было бы неоднозначным, оно пропускается. Форматирование чисто косметично и никогда не меняет смысл.

Сохраняет ли минификация мои комментарии?#

Нет. Комментарии удаляются при минификации, включая баннеры в духе /* !important */. Если вам нужно, чтобы лицензионный заголовок или маркер сборки выжили, храните исходник с комментариями и перевставляйте баннер в сборочном конвейере уже после минификации.

Почему минифицированный выход иногда больше моего входа?#

Почти всегда потому, что вход уже был минифицирован. CSSO всё равно должен его разобрать и переизлучить, а на уже компактном, уже оптимизированном входе брать больше неоткуда — выход по размеру почти тот же. Дайте рукописный или развёрнутый CSS, и выигрыш будет реальным.

Мой CSS отправляется на сервер?#

Нет. Оба движка работают в вашем браузере. Библиотеки подгружаются по требованию из собственного бандла страницы, поэтому сетевого запроса, уносящего ваш стилевой файл, нет.