CSS Минификатор
Войдите или зарегистрируйтесь, чтобы сохранять инструменты в избранное
Минификация CSS кода онлайн — удаление пробелов, комментариев и форматирования для уменьшения размера файла
Минификация CSS удаляет пробелы, комментарии и переносы строк, уменьшая размер файла.
Это важно для оптимизации загрузки сайта — минифицированные файлы загружаются быстрее.
Кнопка «Форматировать» выполняет обратную операцию — добавляет отступы для удобного чтения.
CSS Минификатор онлайн — сжатие стилей для ускорения сайта
CSS минификатор удаляет пробелы, переносы строк, комментарии и лишние символы из CSS-файлов, сохраняя полную функциональность. Типичное сжатие — 20–40% от исходного размера. Также поддерживается обратная операция — форматирование (beautify) минифицированного CSS.
Что удаляется при минификации CSS
- Комментарии —
/* ... */. Полезны в разработке, бесполезны в production - Пробелы и отступы — все пробельные символы между токенами
- Переносы строк — весь CSS становится одной строкой
- Ненужные точки с запятой — последнее свойство в блоке не требует
; - Лишние нули —
0px→0,0.5em→.5em
Типичный результат сжатия
| Файл | До | После | Сжатие |
|---|---|---|---|
| Bootstrap 5 CSS | 189 КБ | 155 КБ | 18% |
| Tailwind CSS (кастомный) | 50 КБ | 35 КБ | 30% |
| Компонент с комментариями | 8 КБ | 4.5 КБ | 44% |
Минификация vs Gzip
Минификация и Gzip/Brotli-сжатие дополняют друг друга. Gzip эффективно сжимает повторяющиеся паттерны (которых в CSS много), минификация убирает бесполезные символы перед Gzip. Итого: минифицированный + Gzip CSS обычно меньше исходного на 60–80%.
Часто задаваемые вопросы
Безопасно ли минифицировать CSS?
Да. Минификация не меняет логику стилей — удаляются только синтаксически незначащие символы. Перед деплоем убедитесь в корректности, запустив тесты.
Можно ли вернуть исходный CSS из минифицированного?
Пробелы и переносы можно восстановить через форматирование (кнопка «Форматировать»). Комментарии вернуть нельзя — они удалены безвозвратно.
Зачем кнопка «Форматировать»?
Для чтения минифицированного CSS из production: сторонние библиотеки, legacy-код. Форматирование добавляет отступы и переносы для читаемости.
Для минификации JavaScript используйте JS минификатор, для создания градиентов — CSS Gradient.
Полезные статьи
WCAG контрастность: доступность цветов в веб-дизайне
Как проверить контрастность цветов по стандарту WCAG 2.1. Уровни AA и AAA, формула расчёта, рекомендации.
CSS Border Radius: скругление углов элементов
Как использовать border-radius: синтаксис, сокращённая запись, эллиптические углы. Генератор border-radius онлайн.