Formatador de CSS

Embeleze CSS com o Prettier: uma declaração por linha, espaçamento consistente, 2 ou 4 espaços ou tabulação e media queries bem aninhadas. No navegador.

Indentação

Entrada CSS

Saída

Executa totalmente no seu navegador. Seus dados nunca são enviados.

Ferramentas Relacionadas

Ver Todas

Formatador de JSON Validador de JSON Formatador de XML camelCase snake_case kebab-case PascalCase CONSTANT_CASE

O que é Formatador de CSS?

O Formatador de CSS transforma folhas de estilo minificadas ou inconsistentes em CSS legível com o Prettier: cada regra e declaração em sua própria linha, espaçamento normalizado em torno de dois-pontos e seletores e regras @ aninhadas indentadas.

Como usar Formatador de CSS

Cole o CSS na caixa de entrada ou clique em Carregar exemplo.
Escolha a Indentação.
Clique em Formatar (a saída também é atualizada enquanto você digita).
Copie ou baixe o CSS formatado.

Exemplo

Entrada

a{color:red;margin:0 auto}

Saída

a {
  color: red;
  margin: 0 auto;
}

Quando usar Formatador de CSS

Use-o para ler CSS minificado de um site, padronizar folhas de estilo escritas à mão antes da revisão ou formatar trechos de CSS para documentação. Ele não verifica nomes nem valores de propriedades: use o Validador de CSS para isso. Para SCSS ou Less, escolha essa linguagem no Embelezador de Código.

Como funciona Formatador de CSS

A folha de estilo é lida pelo parser do Prettier baseado em PostCSS e impressa com as regras de CSS do Prettier: um espaço após cada dois-pontos, cada declaração termina com ponto e vírgula e os seletores de uma lista vão em linhas separadas. Blocos não fechados e outros erros de sintaxe são informados com linha e coluna.