CSS: форматирование и минификация
Форматируйте CSS для чтения или минифицируйте для продакшена
Об этом инструменте
Разверните минифицированный или скопированный откуда-то CSS в правила с одним объявлением на строку — или сожмите таблицу стилей для продакшена. Форматтер нормализует отступы и расстановку скобок; минификатор убирает комментарии, сворачивает пробелы и отбрасывает завершающие точки с запятой, не трогая строки, содержимое url(...) и выражения calc().
Минификатор прозрачен насчёт того, чего он не делает: он не переименовывает селекторы, не объединяет дублирующиеся правила и не переписывает цвета. Это делает вывод предсказуемым и безопасным для любой таблицы стилей, включая те, что с хаками и вендорными префиксами, — вставили, минифицировали, отгрузили.
Как и в любом инструменте здесь, обработка локальна. Неопубликованный код дизайн-системы остаётся в вашем браузере.
Частые вопросы
- Насколько меньше становится минифицированный CSS?
- Обычно на 15–30% для написанного вручную CSS — в основном за счёт отступов и комментариев. Gzip на сервере убирает значительную часть той же избыточности, поэтому разница «по проводу» меньше, чем подсказывает сырой счёт байтов, — но минифицируйте всё равно: это ещё и сокращает время разбора.
- Безопасно ли это для calc(), кастомных свойств и медиазапросов?
- Да. Пробелы внутри calc() значимы и сохраняются; кастомные свойства и их ссылки var() — обычные объявления и проходят без изменений; @media и другие at-правила сохраняют структуру.
- Почему селекторы потомков сохранили пробелы?
- Потому что «nav a» и «nava» выбирают разные вещи — этот пробел является комбинатором, а не оформлением. Минификатор удаляет только пробелы без синтаксического значения.
- Умеет ли он конвертировать между LESS/SCSS и CSS?
- Нет — синтаксис препроцессоров требует компиляции, а не форматирования. Простой SCSS, который заодно является корректным CSS, отформатируется нормально; вложенные правила и миксины — нет.