Formatador de CSS
Transforme CSS minificado ou bagunçado em regras limpas, legíveis e indentadas.
Como usar Formatador de CSS
- Cole o seu CSS à esquerda.
- A versão formatada aparece à direita.
- Copie o CSS organizado.
Sobre Formatador de CSS
O Formatador de CSS transforma folhas de estilo minificadas ou mal formatadas em regras limpas e legíveis. Cole o seu CSS à esquerda e a versão formatada aparece à direita, com cada seletor, declaração e chave de fechamento organizados de forma consistente e indentados para que a estrutura das suas regras seja fácil de acompanhar.
Ele é alimentado pelo js-beautify, a mesma biblioteca de formatação consolidada usada em muitos editores de código, de modo que o espaçamento e a indentação seguem convenções que os desenvolvedores já reconhecem, em vez de um estilo improvisado. Isso é especialmente útil quando você herda uma folha de estilo comprimida de produção, ou um pacote gerado por uma ferramenta de build, e precisa entendê-lo ou editá-lo sem lutar contra uma única linha densa.
Toda a formatação acontece no seu navegador, então o seu CSS nunca é enviado. Copie o resultado organizado de volta para o seu projeto quando terminar. Na hora de publicar, o Minificador de CSS o comprime novamente, e para o código e os scripts que acompanham os seus estilos, o Formatador de HTML e o Formatador de JavaScript fazem o mesmo trabalho.
Perguntas frequentes
Qual motor de formatação ele utiliza?
Ele usa o js-beautify, uma biblioteca consolidada também embutida em muitos editores e IDEs. Suas regras de espaçamento e indentação são previsíveis e familiares, e não uma implementação personalizada.
Formatar altera a forma como os meus estilos são aplicados?
Não. Ele apenas ajusta espaços em branco e indentação. Seus seletores, propriedades e valores permanecem idênticos, então o estilo se comporta exatamente da mesma forma no navegador após a formatação.
Ele consegue expandir uma folha de estilo minificada?
Sim. Cole um arquivo CSS compactado em uma única linha e ele será reindentado em regras legíveis, o que é ideal quando você precisa inspecionar ou editar uma saída de produção ou de uma ferramenta de build.
Meu CSS é enviado para algum lugar?
Não. A formatação acontece inteiramente no seu navegador, então a sua folha de estilo nunca sai da página. Isso a torna segura para estilos proprietários ou ainda não publicados.
Como minifico o CSS novamente para produção?
Depois de editar, passe o resultado pelo Minificador de CSS para remover comentários e espaços em branco, produzindo um arquivo menor para implantação, mantendo a sua cópia legível separadamente.