Formatador de CSS

Escopo: beautifier prático, não parser CSS completo

Formata uma regra por linha, indentação de 2 espaços, uma declaração por linha — cobre bem seletores, propriedades e @media com um nível de aninhamento. Não é um parser CSS completo: aninhamento em múltiplos níveis ou at-rules incomuns podem sair mal formatados. Comentários (/* ... */) são sempre removidos, tanto ao formatar quanto ao minificar.

Quando usar

• Formatar: depurar CSS minificado de terceiros (framework, tema, plugin) antes de localizar uma regra específica ou entender por que um estilo está sendo aplicado
• Formatar: revisar código ou entender como um layout foi construído a partir do CSS compilado de outro site
• Minificar: reduzir o payload de um arquivo CSS avulso antes do deploy, quando o build não faz essa otimização automaticamente
• Processamento 100% local — nada do que você cola sai do navegador

O que a minificação de fato economiza

Minificar remove o que o navegador ignora: espaços, quebras de linha, indentação, comentários e o ponto e vírgula final de cada bloco. Em CSS escrito à mão, isso costuma reduzir o arquivo entre 20% e 40%.

Só que essa economia é bem menor do que parece quando o servidor já usa compressão. Gzip e Brotli são especialmente eficientes com texto repetitivo, e boa parte do que a minificação remove seria comprimida de qualquer forma. O ganho real de minificar um CSS que já vai comprimido costuma ficar na casa de poucos por cento — relevante em arquivos grandes, irrelevante em um trecho de algumas dezenas de linhas.

A conclusão prática: se o seu build já minifica e o servidor já comprime, minificar manualmente não acrescenta nada. Esta ferramenta é útil no caso oposto — um CSS avulso, um trecho injetado em um CMS, um estilo em e-mail ou landing page sem pipeline de build.

Formatar para depurar CSS de terceiros

O uso mais frequente aqui é o inverso: pegar CSS compilado ou minificado e torná-lo legível. Isso aparece quando você precisa entender por que um tema, framework ou plugin está aplicando um estilo que você não escreveu.

Depois de formatar, o caminho costuma ser procurar o seletor conflitante e comparar a especificidade com a da sua regra. Vale lembrar a ordem: !important vence tudo; depois estilos inline; depois a contagem de IDs, classes/atributos/pseudo-classes e elementos, nessa ordem de peso; e, com especificidade igual, vence a regra declarada por último.

Grande parte dos "estilos que não aplicam" se explica por uma dessas quatro coisas, e não por erro de sintaxe.

Limites deste formatador

É um beautifier prático, não um parser CSS completo com árvore sintática. Alguns casos em que o resultado pode sair mal formatado:

• Aninhamento nativo em vários níveis. O CSS moderno permite aninhar seletores como Sass sempre fez. Um nível dentro de @media é tratado bem; estruturas mais profundas podem perder a indentação correta.
• At-rules menos comuns. @supports, @container, @layer e @property têm sintaxe própria que o formatador não modela individualmente.
• Comentários são sempre removidos. Tanto ao formatar quanto ao minificar, e sem opção de preservá-los. Guarde o original se as anotações importarem — inclusive comentários de licença, que muitas bibliotecas exigem manter na distribuição.
• Pré-processadores não são suportados. Sass, Less e Stylus têm sintaxe própria, com variáveis, mixins e diretivas que não são CSS válido. Compile antes de formatar aqui.

Para outros formatos, o formatador de JSON e o validador de XML cobrem casos equivalentes. Todo o processamento acontece no seu navegador, então dá para colar CSS de projetos internos ainda não publicados sem que ele saia da sua máquina.