CSS Minifier — Минификатор CSS

Что делает минификатор CSS

Этот инструмент сжимает таблицы стилей с помощью CSSO (CSS Optimizer) — минификатора, который понимает CSS, а не обрабатывает его как обычный текст. На первом проходе он выполняет безопасную очистку: удаляет пробелы и комментарии, сокращает цвета (#ff0000 превращается в red, #ffffff — в #fff), убирает единицы измерения у нулевых значений, избавляется от лишних кавычек и точек с запятой и записывает числа в самой короткой форме. В результате получается полностью эквивалентный CSS, который заметно меньше.

При включённой опции restructure (реструктуризация) CSSO идёт дальше и оптимизирует структуру таблицы стилей. Правила с одинаковым селектором объединяются, селекторы с идентичными объявлениями группируются, свойства, которые переопределяются дальше в том же правиле, отбрасываются, а развёрнутые объявления, например отдельные отступы margin, могут быть свёрнуты в сокращённую запись. CSSO бережно сохраняет каскад: он перемещает или объединяет правила только тогда, когда это не может изменить, какое объявление победит.

Как читать результаты

Бейджи показывают размер входных и выходных данных в UTF-8 и процент экономии. CSS, написанный вручную, с комментариями и отступами, часто уменьшается на 20–50%. Вывод фреймворков, который уже компактен, выиграет меньше, а таблицы стилей, повторяющие одни и те же объявления во многих селекторах, получают наибольшую выгоду от реструктуризации. Серверы обычно дополнительно применяют gzip или Brotli, поэтому минификация и сжатие дополняют друг друга, а не конкурируют.

Конфиденциально и безопасно

Минификатор работает полностью в вашем браузере — ничего не загружается, не журналируется и не сохраняется. Поэтому он удобен для встроенного критического CSS, шаблонов писем, встраиваемых виджетов или быстрых правок на компьютере без привычных инструментов сборки. Сохраняйте комментарии /*! ... */, если ваша таблица стилей содержит сторонние лицензии, которые нужно оставить. Для продакшн-сайтов добавьте минификатор в процесс сборки, чтобы каждое развёртывание оптимизировалось автоматически, и всегда проверяйте результат визуально, если ваш CSS опирается на браузерные хаки или необычный синтаксис.