Минифицировать CSS

Где на самом деле экономятся байты

Основная экономия — пробелы и комментарии, а в написанной вручную таблице стилей их очень много: отступы, пустые строки между правилами и заголовки разделов, по которым удобно ориентироваться в большом файле, при отдаче сайта — чистый балласт. Кроме того, значения сокращаются так, что их смысл не меняется: цвет #ffffff превращается в #fff, 0px — в 0, ведь нулю не нужна единица, ведущий ноль в 0.5em убирается, а margin: 10px 10px 10px 10px сворачивается в margin: 10px.

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

Вложенные правила и современный синтаксис диапазонов в медиазапросах не минифицируются — такой файл отклоняется, и причину стоит назвать, потому что большинство инструментов поступает наоборот. Парсер, на котором это построено, старше обеих возможностей, и, встретив то, чего не понимает, он не выдаёт ошибку, а молча удаляет это: вложенный блок просто исчезает из результата, и страница теряет стили, о чём никто не сообщил. Честный ответ — отказаться. Если в ваших стилях есть нативная вложенность или @media (400px <= width <= 700px), воспользуйтесь одним из инструментов ниже.

Как и с разметкой, оценивайте результат после сжатия. Таблицы стилей отдаются в gzip или brotli, а эти алгоритмы и так отлично справляются с повторяющимися пробелами, поэтому файл, который после минификации уменьшился на 30 процентов, при передаче может сократиться всего на 5. Экономия реальна, но меньше, чем цифра в заголовке.

Если нужно другое

Для современных таблиц стилей правильный инструмент — Lightning CSS: он понимает вложенность, диапазоны в медиазапросах, цветовые функции и всё остальное, что появилось за последние годы, сжимает сильнее любого более старого инструмента и заодно может транспилировать новый синтаксис для старых браузеров. esbuild --minify style.css почти так же хорош и очень быстр. Обоим место в сборке, а не во вкладке браузера.

Куда больший выигрыш обычно даёт удаление неиспользуемых правил. Сайт на утилитарном фреймворке или библиотеке компонентов часто отдаёт стили, большая часть которых ни к чему на странице не применяется, — и PurgeCSS или сборка самого фреймворка сократят их на порядок. Минификация неиспользуемого CSS делает неиспользуемый CSS меньше; настоящее решение — его удалить.