Веб-разработка
CSS Minify / Beautify
Сжать CSS для продакшена или отформатировать свёрнутый CSS в удобный для чтения вид.
Слишком большой для просмотра
Слишком большой для просмотра
Minifying CSS strips whitespace, comments, and line breaks that only exist for human readability and have no effect on how a browser applies styles. The result is a smaller file and a faster page load.
How to use it
- Minify: paste CSS and the tool strips unnecessary whitespace, comments, and line breaks while keeping behavior identical.
- Beautify: paste minified CSS with no indentation to get a readable version back, with indentation and line breaks.
- Handy for quickly reading CSS from a third-party site that only ships a minified version.
Common uses
- Minifying CSS for production when there's no build tool (Vite, Webpack) set up, or for a quick one-off minification.
- Beautifying minified CSS from a third-party library to read or debug it.
- Estimating how much a CSS file will shrink before setting up an automated build.
Things to keep in mind
Minification never changes styling behavior — it's a purely syntactic transformation; if a page looks different after minifying, that's a bug in the tool, not an intentional change.
Without a source map, debugging minified CSS in production is harder — the line numbers shown in the browser console won't match the original file.
Статья об этом инструменте: Минификация CSS: что именно удаляется из файла и зачем
Часто задаваемые вопросы
Что именно минификация удаляет из моего CSS?
Minify убирает пробелы, разрывы строк и комментарии и сокращает некоторые значения, уменьшая размер файла без изменения поведения CSS.
Может ли Beautify идеально восстановить моё исходное форматирование?
Beautify переформатирует минифицированный CSS с отступами и разрывами строк для читаемости, но не может восстановить комментарии или ваш исходный стиль оформления, поскольку они уже были удалены при минификации.
Безопасна ли минификация для любого корректного CSS?
Да — для синтаксически корректного CSS минификация лишь убирает избыточные символы и никогда не меняет селекторы или значения свойств, и всё происходит локально в вашем браузере.
Нужна ли минификация, если сервер уже сжимает файлы через Gzip?
Да — минификация и сжатие Gzip/Brotli дополняют друг друга: минификация уменьшает сам исходный файл ещё до сжатия, а Gzip/Brotli дополнительно сжимает результат во время передачи, поэтому вместе они дают меньший итоговый размер, чем любая техника по отдельности.
Что такое source map для минифицированного CSS?
Source map — это отдельный файл, сопоставляющий строки минифицированного CSS с оригинальным, отформатированным кодом, позволяя инструментам разработчика в браузере показывать правильные номера строк и имена файлов при отладке, даже когда в продакшн загружается минифицированная версия.