CSS Formatter & Minifier
Understand CSS Formatter & Minifier
Este formatador reindenta uma folha de estilo pela profundidade das chaves, ou a reduz ao menor texto que ainda é interpretável.
How it works
Ele procura os três caracteres que carregam a estrutura do CSS — { } e ; —, indentando um nível por chave aberta e colocando cada declaração em sua própria linha. A minificação remove os comentários e todo espaço opcional: em volta de chaves, dois-pontos, ponto e vírgulas e vírgulas, além do ponto e vírgula final antes de uma chave de fechamento, já que a chave encerra a declaração de qualquer forma. Nada é reordenado e nenhum valor é reescrito.
When to use it
- Ler uma folha de estilo minificada tirada de um site em produção ou das ferramentas de desenvolvedor.
- Limpar CSS colado de uma ferramenta de design ou de um gerador de código.
- Ter uma noção aproximada do tamanho de uma folha de estilo antes de montar uma etapa de build.
- Deixar consistente um arquivo editado à mão antes de commitá-lo.
Watch out for
- Os dois modos apagam comentários, inclusive um banner /*! ... */ que a licença de uma dependência exige que você mantenha.
- Um ponto e vírgula dentro de um valor quebra o embelezador. url(data:image/svg+xml;base64,...) contém um, então um data URI embutido acaba com uma quebra de linha no meio e a regra para de funcionar. A minificação lida com esse caso; o embelezamento não.
- A minificação aqui só remove espaço em branco. Um minificador de verdade também mescla regras duplicadas e encurta valores (#ffffff para #fff), então o tamanho medido aqui não é o tamanho que a sua ferramenta de build vai produzir.
- Códigos de pré-processador são indentados apenas pelas chaves. O aninhamento do SCSS vai parecer correto, mas @mixin, & e variáveis passam adiante sem serem examinados.
Not the right tool for: Minificação para produção. O cssnano e o Lightning CSS interpretam a folha de estilo e fazem transformações que isto não pode fazer com segurança.
Frequently Asked Questions
Quanto a minificação de CSS reduz o tamanho do arquivo?
A minificação normalmente remove de 10% a 30% do tamanho de um arquivo CSS, retirando espaços em branco, comentários e ponto e vírgulas redundantes. Combinada com a compressão gzip no servidor, a redução real no tráfego pode chegar a 60%–80% em relação ao CSS não comprimido e não minificado.
Isto lida com custom properties (variáveis) do CSS?
Sim — variáveis CSS (--color-primary: #5C5BFE) são preservadas e formatadas normalmente. O formatador não avalia nem substitui os valores das variáveis; ele os trata como valores de string opacos.
Devo minificar o CSS em desenvolvimento?
Não — minifique apenas em builds de produção. CSS minificado é ilegível e dificulta muito a depuração. Use sua ferramenta de build (Vite, webpack, esbuild) para minificar automaticamente em produção. Mantenha o código-fonte formatado no controle de versão.
How to Use CSS Formatter & Minifier
- Paste or type your input in the input area above.
- The tool processes your input automatically or click Run.
- Copy or download the result using the action buttons.
- Use Ctrl+Enter to run quickly from the keyboard.