Como funciona
Reindenta e organiza folhas de estilo CSS ou SCSS comprimidas ou mal alinhadas para deixá-las legíveis. Serve para inspecionar estilos minificados, revisar CSS de terceiros ou unificar o formato antes de salvá-lo.
Permite escolher o tipo de indentação (espaços ou tabulações), o tamanho do recuo e o fim de linha. Cada declaração passa para a sua própria linha e os seletores separados por vírgulas ficam em linhas independentes.
O processamento é totalmente local, no seu navegador, com o js-beautify. Formata a apresentação; não minifica, não reordena propriedades nem valida se as regras estão corretas.
Exemplos
a,b{color:red;margin:0}a,
b {
color: red;
margin: 0
}Os seletores são separados em linhas e cada propriedade fica recuada.Casos de uso
- Tornar legível um arquivo .css minificado de um site.
- Normalizar a indentação de uma folha de estilos antes de um commit.
- Revisar e comparar regras CSS de um framework ou biblioteca.
- Organizar SCSS colado de documentação ou geradores.
Perguntas frequentes
Serve também para SCSS ou LESS?
Formata CSS e sintaxe compatível como SCSS, incluindo regras aninhadas. Não compila SCSS nem LESS para CSS: apenas reorganiza a indentação e as quebras de linha.
Reordena ou agrupa as propriedades?
Não. Mantém a ordem original de seletores e declarações. Só muda o espaçamento, o recuo e as quebras de linha para melhorar a legibilidade.
É o mesmo que minificar CSS?
Não, é o oposto. Formatar adiciona espaços e quebras para lê-lo melhor; minificar os remove para reduzir o tamanho do arquivo. Para comprimir, use a ferramenta de minificação.
Meu código é enviado a um servidor?
Não. A formatação ocorre inteiramente no seu navegador; o CSS nunca sai do seu computador.