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

Минификатор сжимает CSS перед публикацией: убирает пробелы, переносы строк, обычные комментарии и последние точки с запятой, сокращает запись цветов и чисел. Правила не переставляются и не объединяются, поэтому порядок каскада остаётся прежним. Перед сжатием код проверяется: незакрытая скобка или свойство без значения подсвечиваются на месте, а не превращаются молча в сломанный CSS. Нажмите «Форматировать» — и тот же инструмент развернёт минифицированный CSS обратно в читаемый вид.

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

Вставьте CSS или откройте файл .css — сжатый код и экономия в процентах появятся сразу. Результат можно скопировать или скачать.

Код обрабатывается в браузере и не отправляется на сервер. Размер — до 2 МБ. Для JavaScript есть минификатор JS, для разметки — HTML форматтер.

Для вашего удобства рекомендую использовать полноэкранный режим.

Операция
Отступ

Код обрабатывается только в вашем браузере, до 2 МБ в UTF-8.

Обрабатываем код…

Исходный код

Файл не выбран
UTF-8, до 2 МБ. Файл можно перетащить на поле. Код обрабатывается только в вашем браузере.
/*! Пример */
.card { color: #336699; padding: 16px 24px; --gap: 8px; width: calc(100% - var(--gap)); }
@media (width < 600px) { .card { padding: 12px; } }

Результат

Для обработки кода включите JavaScript.


Что делает минификация


    
    
  • Удаляет пробелы, переносы строк и отступы, которые нужны только человеку.
    • 
    
  • Удаляет обычные комментарии, но сохраняет /*! … */ — в них обычно указывают лицензию библиотеки.
    • 
    
  • Сокращает значения без изменения смысла: #ffffff → #fff, 0.5em → .5em, 0px → 0.
    • 
    
  • Значения пользовательских свойств --* не трогает: их содержимое может быть чем угодно, и сжатие могло бы его сломать.
    • 



Исходный CSS и результат:


CSS
/* Карточка */
.card {
  color: #ffffff;
  padding: 0px 16px;
  margin: 0.5em auto;
}


CSS
.card{color:#fff;padding:0 16px;margin:.5em auto}




Вопросы и ответы


Сколько можно сэкономить?


Обычно 15–30 % размера, в зависимости от числа комментариев и отступов. Сервер дополнительно сжимает файл через gzip или Brotli, поэтому минификация и сжатие на сервере дополняют друг друга.


Почему правила не объединяются?


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


Нужно ли минифицировать CSS вручную?


В проектах со сборкой (Vite, webpack) это делает сборщик. Инструмент удобен для небольших сайтов без сборки, писем и вставок кода в CMS.




Изучить CSS


Синтаксис правил и каскад — в учебнике CSS и статье о каскадности.