Formatador CSS

O que faz um formatador CSS

Um formatador CSS pega uma folha de estilo e reescreve o layout dela sem mudar o significado. Cada regra ganha seu próprio bloco, cada declaração ganha sua própria linha, e blocos aninhados, como media queries, ganham um nível a mais de recuo (indentação). O resultado é o mesmo CSS, só que mais fácil de ler, revisar e editar.

Isso ajuda quando você copia estilos de um arquivo minificado, abre um tema escrito à mão ao longo de muitos anos ou cola CSS das ferramentas de desenvolvedor do navegador. Também ajuda antes de uma revisão de código, porque uma formatação consistente faz o diff mostrar só as mudanças reais.

Como usar este formatador CSS

1. Cole seu CSS na caixa da esquerda. Ele é formatado assim que você cola.
2. Ou clique em Abrir arquivo para carregar um arquivo .css do seu aparelho, ou em Exemplo para testar com um código de exemplo.
3. Escolha o Recuo que você quer: 2 espaços, 4 espaços ou tabulações.
4. Defina a Largura da linha. Listas longas de seletores e valores quebram de linha quando passam dessa largura.
5. Ligue Aspas simples se o seu projeto prefere 'Inter' a "Inter".
6. Clique em Formatar (ou Ctrl+Enter) para embelezar, ou em Minificar para compactar.
7. Clique em Copiar ou Baixar para pegar o resultado.

Depois que você formata algo, o resultado é atualizado enquanto você digita. Se o CSS tiver um erro de sintaxe, a mensagem abaixo das caixas diz onde ele está, e Mostrar na entrada leva até esse ponto.

Antes e depois

Este é um bloco de CSS minificado:

.card{display:flex;padding:16px 24px;border:1px solid #ddd}.card>h2,.card .title{font-size:1.25rem;margin:0 0 8px}@media (max-width:600px){.card{flex-direction:column}}

Depois de Formatar com 2 espaços:

.card {
  display: flex;
  padding: 16px 24px;
  border: 1px solid #ddd;
}
.card > h2,
.card .title {
  font-size: 1.25rem;
  margin: 0 0 8px;
}
@media (max-width: 600px) {
  .card {
    flex-direction: column;
  }
}

Repare que o combinador de filho > ganha um espaço de cada lado, cada seletor da lista fica em sua própria linha e a regra dentro da media query ganha recuo. Os comentários ficam onde você os escreveu.

Minificar CSS

Minificar faz o caminho inverso. Remove os comentários e os espaços de que os navegadores não precisam. Rodar no código formatado acima devolve uma única linha:

.card{display:flex;padding:16px 24px;border:1px solid #ddd}.card>h2,.card .title{font-size:1.25rem;margin:0 0 8px}@media (max-width:600px){.card{flex-direction:column}}

O minificador é cuidadoso de propósito. Ele mantém o espaço em div :first-child, porque tirá-lo mudaria o seletor. Mantém os espaços dentro de calc(100% - 2rem), porque o calc precisa deles. Deixa em paz as strings e os valores de url(). Os comentários que começam com /*! são mantidos, já que normalmente guardam uma licença:

/*! Theme v2 | MIT */ .btn{padding:8px 12px;color:#fff}

Ele não junta regras duplicadas, não encurta cores e não remove seletores não usados. Para esse nível de otimização, use uma ferramenta de build como cssnano ou Lightning CSS no seu projeto.

Como ler as mensagens de erro

O formatador precisa de um CSS válido para funcionar. Se faltar uma chave, você recebe uma mensagem como esta. A posição vem em português, e o texto do erro vem do Prettier, em inglês:

Linha 1, coluna 1: Unclosed block

A posição aponta para o bloco que foi aberto e nunca foi fechado. As causas mais comuns são uma } faltando no fim de uma regra, uma { sobrando depois de um seletor ou um comentário que não foi fechado. Corrija o problema e clique em Formatar de novo.

A ferramenta não verifica se os nomes e os valores das propriedades existem. colr: red é uma sintaxe válida, então é formatada, e não apontada como erro. Um linter como o Stylelint pega esse tipo de engano.

Dicas

• Use 2 espaços, a não ser que o seu projeto já use outra coisa. É a escolha mais comum nos guias de estilo de CSS.
• Mantenha o arquivo minificado como resultado do build e o formatado como código-fonte. Editar CSS minificado à mão é pedir para errar.
• Se o CSS estiver dentro de um arquivo HTML, em uma tag style, cole a página inteira no formatador HTML. Ele também formata o CSS embutido.
• Arquivos Sass com aninhamento e $variáveis vão para o formatador SCSS.

Outras formas de formatar CSS

• VS Code: abra o arquivo e use Formatar Documento (Shift+Alt+F no Windows, Shift+Option+F no macOS). Instale a extensão do Prettier para ter o mesmo resultado desta página.
• Linha de comando: npx prettier --write styles.css formata um arquivo no próprio lugar com o Prettier.
• Ferramentas de desenvolvedor do navegador: o painel Sources do Chrome e do Firefox tem um botão de pretty print para folhas de estilo minificadas. Ele serve para ler, mas não deixa você ajustar opções como a largura do recuo.

Esta página é prática quando você não quer instalar nada, ou quando precisa conferir rapidamente um código que veio de outro lugar. Se você também trabalha com scripts, o formatador JavaScript usa o mesmo motor e as mesmas opções.