CSS-минификатор

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

Преобразования (никогда не меняют поведение):

• Удаление комментариев (всех, включая блоки /*! лицензий).
• Удаление лишних пробелов (между селекторами, объявлениями, скобками).
• Удаление завершающих точек с запятой перед закрывающими скобками.
• Схлопывание многострочных правил в одну строку.

И это всё, поэтому вывод ведёт себя точно так же, как оригинал: каждый селектор, свойство и значение остаются как написаны.

Типичная экономия

Поверх минификации gzip-сжатие на сервере добавляет ещё 60-80% экономии, потому что CSS очень избыточен. Эти эффекты складываются; всегда делайте оба.

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

• Удаление неиспользуемого CSS. Это территория tree-shaking / PurgeCSS, что требует анализа HTML или компонентов.
• Сокращение hex-цветов, схлопывание нулевых единиц или объединение объявлений. Эти агрессивные преобразования это работа cssnano, esbuild или Lightning CSS, а не этого инструмента.
• Объединение одинаковых селекторов в один. Рискованно, потому что порядок исходников влияет на каскад; некоторые минификаторы пробуют, большинство пропускают.
• Переименование классов. Это CSS-in-JS или CSS Modules, не минификация.
• Инлайнинг critical CSS. Это отдельный этап на этапе сборки.

Сохранение license-комментариев

Многие минификаторы сохраняют комментарии, начинающиеся с /*!, для license-заголовков:

/*! Bootstrap v5.3 · MIT License · https://github.com/twbs/bootstrap */

Этот инструмент удаляет все комментарии. Если ваш CSS содержит license-заголовки, добавьте их обратно после минификации или используйте build-инструмент с опцией сохранения лицензий, например cssnano или esbuild.

Source maps

Для отладки в продакшене build-инструменты генерируют source map рядом с минифицированным выводом:

styles.min.css
styles.min.css.map

DevTools может прочитать map и показать номера строк исходника при инспекции элемента. Этот инструмент не генерирует source maps.

CSS-минификация в build-пайплайне

• Vite, Webpack, Parcel: делают это автоматически в production-сборках.
• PostCSS с cssnano: стандартный самостоятельный минификатор.
• esbuild: тоже включает минификацию CSS.
• Пресеты cssnano: default для безопасных преобразований, advanced для агрессивных (с компромиссами).

Этот инструмент для разовой минификации, быстрых правок и понимания, что именно делают минификаторы. Для production-воркфлоу используйте build-инструмент, чтобы исходники оставались читаемыми и минифицировался только вывод.

Когда минификация может сломать CSS

Редко, но возможно:

• Пробел-чувствительные селекторы: .foo .bar против .foo.bar, пробел важен.
• Значения custom properties с пробелами: --shadow: 0 2px 4px rgba(0,0,0,0.1), запятые внутри rgba() нельзя удалять.
• Незакрытые блок-комментарии: /* missing close съедает всё после себя. Минификаторы могут вести себя странно на некорректном вводе.

Решение: всегда прогоняйте минифицированный вывод через lint/test перед выкаткой.