Formatador de CSS

Cole uma folha de estilo ou trecho de CSS e esta ferramenta formata com indentação consistente, ou reduz tudo a uma única linha densa. CSS malformado, com chaves não fechadas ou regras soltas, ainda é formatado em vez de gerar um erro, então dá para limpar um CSS bagunçado sem corrigir cada problema de sintaxe antes.

Como funcionam a formatação e a minificação?

A formatação usa a biblioteca js-beautify, que você pode configurar para indentação de 2 espaços, 4 espaços ou tab. Ela trabalha em cima de tokens, não de um parser rígido, então uma folha de estilo com uma chave de fechamento faltando ou um ponto e vírgula perdido ainda sai razoavelmente indentada em vez de disparar um erro, o que importa quando você está limpando um CSS copiado das ferramentas de desenvolvedor do navegador ou de um arquivo pela metade. A minificação vai no caminho oposto: remove comentários, colapsa espaços em branco e tira os espaços desnecessários ao redor de { } ; : , >, mas deixa intacto o conteúdo de strings entre aspas e chamadas url(...), para que um caminho de arquivo ou um nome de fonte com espaço sobreviva intacto.

O minificador funciona com um conjunto de expressões regulares, não com um parser completo de CSS, então tem algumas situações conhecidas que escapam: um url() com um parêntese de fechamento literal dentro de um argumento entre aspas não é tratado corretamente, e colapsar o espaço antes de dois-pontos pode juntar um combinador descendente com uma pseudo-classe seguinte (transformando a :hover em a:hover, o que muda o que o seletor casa). Os dois casos são raros em CSS do mundo real, e a ferramenta aceita esse risco pequeno em troca de nunca travar diante de uma entrada tosca.

Meu CSS é enviado para algum servidor?

Não. A formatação e a minificação acontecem inteiramente no navegador usando a biblioteca embutida na página, nada é enviado a um servidor. Folhas de estilo proprietárias, trabalho de cliente ou trechos extraídos com conteúdo real ficam na sua máquina, o que ajuda quando o CSS que você está limpando vem de um código interno que prefere não colar num formulário qualquer.

Usos comuns: arrumar uma folha de estilo minificada salva a partir do view-source, reduzir um arquivo CSS antes de publicá-lo, ou reformatar os estilos de um componente com uma indentação consistente para revisão de código. Veja a referência de sintaxe CSS do MDN para entender como seletores, declarações e at-rules se encaixam.