Formatador e Beautifier de CSS

O que faz um formatador de CSS?

Um formatador de CSS pega código de folha de estilo em qualquer formato — minificado em uma linha só, com indentação inconsistente ou copiado das DevTools do navegador — e o reescreve com um layout previsível: o seletor, uma chave de abertura, uma declaração propriedade: valor; por linha e a chave de fechamento em uma linha própria. As regras dentro de blocos @media, @supports e @container ganham um nível extra de indentação para que a estrutura fique evidente.

A formatação é o primeiro passo quando você precisa depurar um tema de terceiros, revisar CSS em um pull request ou aprender com os estilos de outro site. O formatador usa o js-beautify e roda inteiramente no seu navegador.

Antes e depois

.btn,.btn-primary{display:inline-flex;padding:.625rem 1rem;color:#fff}@media (max-width:640px){.btn{width:100%}}

vira

.btn,
.btn-primary {
  display: inline-flex;
  padding: .625rem 1rem;
  color: #fff
}

@media (max-width:640px) {
  .btn {
    width: 100%
  }
}

Observe que o formatador não adiciona nem remove ponto e vírgula, não reordena propriedades e não altera valores — ele só muda os espaços em branco, então o resultado se comporta exatamente como a entrada.

SCSS, Less e CSS moderno

Regras aninhadas, seletores pai com &, variáveis ($brand, @brand), mixins e o aninhamento nativo do CSS são todos indentados corretamente. Propriedades customizadas (--brand: #4f46e5), clamp(), :is()/:where() e camadas em cascata (@layer) passam sem alteração.

Convenções de estilo que vale adotar

• Indentação de dois espaços é o padrão de fato na maioria dos guias de estilo de CSS e o padrão do Prettier.
• Um seletor por linha em seletores agrupados deixa os diffs menores quando você adiciona ou remove um seletor.
• Uma linha em branco entre regras facilita a leitura de arquivos longos.
• Mantenha a formatação automática: rode Prettier ou Stylelint no seu editor e no CI para que a formatação nunca apareça na revisão de código.

Indo para produção? Use o CSS Minifier para ver exatamente quantos bytes você economiza, ou marque Minify acima. Para converter valores em pixels enquanto isso, experimente o conversor de PX para REM.

Também pesquisado como: beautifier css, formatar css, identar css, deixar css legível, css prettifier, formatador scss, formatador less, organizar código css.

Ferramentas que combinam com: Formatador de CSS

• Formatador HTML — Cole HTML minificado ou bagunçado e receba um código limpo e com indentação consistente, incluindo os blocos <style> e <script> embutidos.
• Formatador JavaScript — Desminifique e deixe legível JavaScript, JSON ou JSX com a indentação e o estilo de chaves que você preferir, ou remova espaços e comentários com um minificador verificado.
• Calculadora de braçadeiras — Digite um tamanho mínimo e máximo e o intervalo da janela de visualização — obtenha um valor fácil de ajustar com o zoom clamp() com explicações matemáticas, uma pré-visualização em tempo real e uma escala completa e fluida de fonte ou espaçamento.
• Conversor de Cores — Cole qualquer cor CSS — HEX, rgb(), hsl(), hwb(), oklch() ou um nome como tomato — e veja todos os outros formatos na hora, além de uma paleta pronta de 50 a 950.