Desenvolvimento Web
CSS Minify / Beautify
Comprimir CSS para produção ou formatar CSS minificado em um formato legível.
Grande demais para visualizar
Grande demais para visualizar
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.
Artigo sobre esta ferramenta: Minificação de CSS: o que é realmente removido do arquivo, e por quê
Perguntas frequentes
O que exatamente a minificação remove do meu CSS?
O Minify remove espaços em branco, quebras de linha e comentários e encurta alguns valores, reduzindo o tamanho do arquivo sem alterar o comportamento do CSS.
O Beautify pode restaurar perfeitamente minha formatação original?
O Beautify reformata o CSS minificado com indentação e quebras de linha para legibilidade, mas não pode recuperar comentários ou suas escolhas de estilo originais, já que foram removidos durante a minificação.
A minificação é segura para qualquer CSS válido?
Sim — para CSS sintaticamente válido, minificar apenas remove caracteres redundantes e nunca altera seletores ou valores de propriedades, e tudo acontece localmente no seu navegador.
Ainda preciso minificar se o servidor já comprime os arquivos com Gzip?
Sim — a minificação e a compressão Gzip/Brotli se complementam: a minificação reduz o próprio arquivo fonte antes da compressão, e Gzip/Brotli comprime ainda mais o resultado durante a transferência, então juntas elas produzem um tamanho final menor do que qualquer técnica isolada.
O que é um source map para CSS minificado?
Um source map é um arquivo separado que mapeia as linhas do CSS minificado de volta ao código original formatado, permitindo que as ferramentas de desenvolvedor do navegador mostrem os números de linha e nomes de arquivo corretos durante a depuração, mesmo quando a versão minificada é o que realmente vai para produção.