Минификация и форматирование CSS - сжать или развернуть
Минификатор и форматировщик CSS
Что делает этот инструмент
Две противоположные задачи над одной таблицей стилей. Минификация убирает то, что нужно только человеку: комментарии и отступы. Форматирование возвращает их, чтобы доставшийся вам файл снова читался. Обе работают с данным текстом и ни одна не трогает смысл CSS.
Как пользоваться
- 1 Вставьте CSS: целый файл или одно правило.
- 2 Нажмите «Минифицировать», чтобы сжать, или «Форматировать», чтобы развернуть с отступами.
- 3 Проверьте объём и скопируйте результат.
Пробел в селекторе это не украшение
«.a .b» выбирает .b внутри .a; «.a.b» выбирает элемент с обоими классами. Это разные селекторы, и минификатор, считающий пробел лишним, молча красит не те элементы. Здесь пробел между двумя частями селектора сохраняется всегда, убирается только пробел вокруг комбинаторов вроде > и +.
calc() нуждается в своих пробелах
В «calc(100% - 10px)» пробелы вокруг минуса требует сама грамматика: без них браузер читает «-10px» как отрицательную длину, выражение становится недопустимым и всё объявление выбрасывается. Никто вас не предупредит, вёрстка просто окажется неправильной. Этот инструмент никогда не убирает пробелы внутри скобок.
Лицензионные комментарии остаются
Комментарий, начинающийся с /*!, несёт указание об авторских правах или лицензии, и по соглашению любой минификатор его сохраняет. Убрать его значит стереть атрибуцию, которую библиотека просит распространять вместе с ней. Обычные /* комментарии написаны для вас и вашей команды, поэтому они уходят.
Минификация CSS даёт меньше, чем gzip
Серверы и так сжимают таблицы стилей на выходе, а gzip прекрасно справляется с повторяющимися пробелами, поэтому минификация сверху обычно экономит несколько процентов, а не половину. Делайте это потому, что именно этот файл уходит в продакшн и вы хотите его небольшим и стабильным, а не ради заметного ускорения страницы.