CSS Beautifier
Formata CSS minificado ou desorganizado com indentação adequada.
What is CSS Beautifier?
O CSS Beautifier pega CSS minificado, comprimido ou formatado de forma inconsistente e o reorganiza com indentação limpa e consistente — um bloco de seletor por seção, uma declaração por linha, regras aninhadas (como consultas de mídia) indentadas um nível mais profundo para cada nível de aninhamento. Ele é construído com uma pequena máquina de estado que rastreia comentários e valores de string citados, então um `{` ou `;` que aparece dentro de um comentário ou dentro de uma string citada (como `content: "a { b"`) nunca é confundido com a estrutura real do CSS e é deixado exatamente como você o escreveu. Isso torna seguro executá-lo em CSS que você retirou de um pacote de produção minificado quando você precisa realmente ler o que uma regra está fazendo, ou antes de colar um trecho em documentação ou revisão de código.
How to Use CSS Beautifier
- Cole seu CSS — minificado ou desorganizado — na caixa de entrada.
- A versão formatada aparece instantaneamente abaixo, com indentação consistente de 2 espaços por nível de aninhamento.
- Copie o resultado formatado com o botão de cópia.
Examples
Uma regra minificada
Input: .a{color:red;background:#fff;}
Output: .a { color:red; background:#fff; }
Uma consulta de mídia aninhada
Input: @media (max-width: 600px){.a{color:red;}}
Output: @media (max-width: 600px) { .a { color: red; } }
Common Mistakes
- Executar isso em CSS genuinamente inválido e esperar que seja corrigido — um formatador reorganiza a estrutura, não conserta sintaxe quebrada.
- Esperar que os próprios valores das propriedades sejam reorganizados (por exemplo, atalho de cor expandido) — essa ferramenta apenas lida com indentação e quebras de linha, não normalização de valores.
- Colar CSS com chaves desbalanceadas e ficar confuso com o erro — verifique se há uma `}` faltando no final de uma regra ou uma extra copiada por engano.
- Supor que a saída bonificada significa pronto para produção — você geralmente irá querer minificar novamente antes de enviar; veja a ferramenta CSS Minifier.
Why Use This Tool
- Processa inteiramente no lado do cliente — seu CSS nunca deixa o seu navegador.
- Comentários e conteúdo de literais de string são protegidos de serem confundidos com sintaxe estrutural.
- Corretamente indentar regras aninhadas como consultas de mídia.
- Formatação instantânea e ao vivo sem um botão de envio.