Formatador de CSS online para folhas de estilo legíveis

Introdução

CSS minificado ou espremido à mão é eficiente para o navegador baixar, mas difícil de uma pessoa ler — tudo vem grudado, sem quebras de linha, sem recuo e quase sempre sem comentários. Embelezar faz o contrário de minificar: pega o CSS nesse estado comprimido e reconstrói as quebras de linha, o espaçamento e o recuo que o tornam legível de novo, sem mudar o que qualquer regra faz. Isso importa sempre que é uma pessoa, e não um navegador, que precisa de fato olhar o CSS: para aprender com ele, conferi-lo ou achar uma regra específica ali dentro.

Como esta ferramenta formata o seu CSS

Colar o CSS e clicar em Embelezar reconstrói o código com uma regra por bloco: cada seletor na própria linha e, recuadas abaixo dele, suas propriedades, uma por linha. Os valores das propriedades em si — cores, unidades, formas abreviadas — ficam exatamente como você colou; só o espaçamento e a estrutura mudam. Vale conhecer dois detalhes sobre como seletores e valores são tratados:

• Seletores agrupados continuam juntos. Uma regra com vários seletores separados por vírgula, como .card, .card-highlight, .card-featured { ... }, é mantida numa única linha de seletor, em vez de ser quebrada um por linha como fazem alguns formatadores.
• Valores que contêm dois-pontos são tratados corretamente. Apenas os primeiros dois-pontos de cada declaração são tomados como a divisa entre a propriedade e o valor dela, então um valor que por sua vez contém dois-pontos — um endereço da web como background: url(http://example.com/img.png) é o caso mais comum — não fica cortado no ponto errado.

Os comentários são removidos como parte desse processo, o que vale saber se a sua folha de estilos inclui um aviso de licença ou de atribuição — veja a observação mais abaixo.

O que saber antes de usar

Esta ferramenta se dá bem com CSS direto e plano — uma lista simples de seletores e suas propriedades. Ela tem duas limitações específicas que vale conhecer antes de colar código do mundo real:

• Regras aninhadas não são formatadas direito. Se o seu CSS inclui uma consulta @media, um bloco @keyframes ou qualquer regra aninhada dentro de outro bloco, o trecho em volta provavelmente vai sair embaralhado em vez de bem recuado. Esta ferramenta reconstrói a estrutura casando chaves de abertura e fechamento um par por vez, e não acompanha a que profundidade dentro de outro bloco cada chave está — então uma regra aninhada dentro de @media acaba com o conteúdo dela misturado ao próprio bloco @media, em vez de permanecer devidamente aninhada. Se a sua folha de estilos usa consultas de mídia ou keyframes, confira esse trecho da saída com atenção, ou embeleze uma versão sem as partes aninhadas.
• Todos os comentários são removidos, sem exceção. Diferente do CSS Minifier deste site, que preserva comentários escritos como avisos de licença ou atribuição, este embelezador tira todo comentário do código colado. Se a sua folha de estilos inclui um cabeçalho de licença que você precisa manter, guarde uma cópia antes de embelezar.

Nenhuma das duas coisas afeta o que o CSS faz — as regras e os valores por baixo não mudam; o que está em jogo é apenas quanto da estrutura fica corretamente reformatada de forma legível.

Quando esta é a ferramenta certa

• Ler o CSS minificado de outra pessoa para aprender com ele. Ver a folha de estilos de um site real pelas ferramentas de desenvolvedor do navegador costuma mostrar CSS comprimido e ilegível — colar aqui e embelezar torna possível estudar de verdade como um leiaute ou um componente foi construído, um uso genuíno de educação digital que vai além de rodar a ferramenta no próprio código.
• Revisar o CSS entregue por um aluno. Código copiado e colado entre editores às vezes perde a formatação original; embelezar antes de ler deixa a correção e o retorno mais rápidos.
• Investigar um leiaute que não está funcionando. CSS denso e sem formatação é mais difícil de varrer em busca da regra que está causando o problema — formatar primeiro costuma deixar a falha real mais fácil de enxergar.

Se o CSS com que você trabalha depende de consultas @media ou de outros blocos aninhados e você precisa de formatação confiável, o formatador embutido de um editor de código serve melhor que esta ferramenta — veja a limitação acima. Para uma folha de estilos plana, sem regras aninhadas, o que cobre boa parte do trabalho inicial de design web, esta ferramenta é um jeito rápido de obter uma saída legível sem instalar nada.

Exemplo

Uma aluna acha interessante o CSS de um site de modelos e quer entender como um leiaute de cartões foi montado. A folha de estilos no ar está minificada numa única linha densa, então, antes de conseguir lê-la, ela cola o conteúdo nesta ferramenta e embeleza. As regras se separam numa estrutura legível, e isso deixa ver qual seletor controla cada parte do leiaute, como o espaçamento é definido com margin e padding, e quais cores se repetem pelo projeto. Se a folha copiada inclui consultas @media para comportamento responsivo, esse trecho precisa de uma segunda olhada depois — veja “O que saber antes de usar” mais acima.

Perguntas frequentes

Embelezar muda o que o CSS faz?

Não. Só mudam o espaçamento, as quebras de linha e o recuo — os seletores, as propriedades e os valores continuam iguais.

O que acontece com os comentários do meu CSS?

Eles são removidos. Esta ferramenta não preserva comentários de licença ou atribuição como o CSS Minifier faz — guarde uma cópia antes se precisar manter algum.

Ela formata direito CSS com consultas de mídia?

Não de forma confiável. Regras aninhadas dentro de @media, @keyframes ou blocos parecidos podem sair embaralhadas — confira essa parte da saída, ou use o formatador de um editor de código para folhas de estilo que dependem muito de aninhamento.

Posso embelezar CSS minificado copiado de outro site?

Pode — é um uso comum e legítimo para aprender como uma página foi construída. Fique atento aos termos do site de origem se pretende reaproveitar o código em vez de apenas estudá-lo.

Meu código fica salvo em algum lugar?

Não. O CSS colado é processado para gerar o resultado formatado e não fica armazenado depois; registra-se apenas que a ferramenta foi usada, não o código em si.

Seletores agrupados vão ser quebrados em linhas separadas?

Não. Uma regra escrita com vários seletores separados por vírgula permanece numa linha de seletor, do jeito que foi escrita originalmente.

Que ferramentas relacionadas posso usar?

Use CSS Minifier para comprimir o CSS de volta para produção, ou JavaScript Beautifier e HTML Beauty para outras tarefas de formatação de código.