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

Что это за инструмент?

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

Этот инструмент построен на clean-css — оптимизаторе CSS, который действительно разбирает таблицу стилей в AST, а не использует регулярные выражения. Именно поэтому он безопасно обрабатывает сложные случаи, ломающие наивные минификаторы: пользовательские свойства CSS (--main-color: ...), содержимое внутри строк, а также сложные селекторы и медиазапросы — всё это выводится корректно.

Зачем его использовать?

• Минификация на основе AST (clean-css), а не регулярных выражений — безопасна с пользовательскими свойствами, строками и вложенными медиазапросами.
• Оптимизации уровня 2 объединяют и упрощают правила, давая дополнительную экономию сверх простого удаления пробелов.
• Видите точное количество сэкономленных байт и процентов.
• Режим форматирования превращает минифицированную таблицу стилей обратно в читаемый CSS с единообразными отступами.
• 100% локальная обработка — проприетарные или неопубликованные стили никогда не покидают ваш браузер.

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

1. Вставьте свой CSS в поле ввода или нажмите «Загрузить пример», чтобы попробовать образец с пользовательским свойством и медиазапросом.
2. Нажмите «Минифицировать», чтобы сжать код, или «Форматировать», чтобы привести его в порядок с отступом в 2 пробела.
3. Проверьте сообщение под полями — режим минификации показывает уменьшение размера; недопустимый CSS покажет понятную ошибку вместо тихого создания сломанного результата.
4. Нажмите «Копировать», чтобы получить результат.

Пример

Ввод

:root {
  --main-color: #4f46e5;
}

.card {
  color: var(--main-color);
  padding: 16px;
}

@media (max-width: 600px) {
  .card {
    padding: 8px;
  }
}

Результат

:root{--main-color:#4f46e5}.card{color:var(--main-color);padding:16px}@media (max-width:600px){.card{padding:8px}}

Пользовательское свойство, медиазапрос и порядок каскада сохраняются — удаляются только пробелы, комментарии и избыточные символы.

Практические советы

• Минифицируйте на этапе сборки/развёртывания, а не во время разработки — редактируйте читаемый исходник и позволяйте этому инструменту (или вашему пайплайну сборки) создавать финальную версию.
• Если вы отлаживаете, почему страница выглядит иначе в продакшене, предварительное форматирование минифицированного CSS сильно упрощает сравнение с исходником.
• Пользовательские свойства переживают минификацию, поэтому таблицы стилей на основе дизайн-токенов (с --spacing, --color-* и т. д.) можно безопасно обрабатывать этим инструментом.
• Комбинируйте с минификаторами HTML и JS ниже, если в вашем проекте перед релизом всё хранится в отдельных файлах.

Где это применяется в реальных рабочих процессах

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

Режим форматирования полезен и для обратной задачи: изучение минифицированной таблицы стилей конкурента или устаревшего продакшена, чтобы понять её структуру перед написанием переопределений или редизайном.

→ Минификатор HTML · Минификатор JavaScript

Типичные сценарии использования

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

Часто задаваемые вопросы