Embelezador CSS – Formate o código CSS online

CSS input

Indent

Share X / Twitter Facebook LinkedIn WhatsApp

Como usar Embelezador CSS

Cole o CSS — estilos de produção reduzidos ou qualquer folha de estilo bagunçada.
Leia a saída formatada — uma declaração por linha, blocos recuados.
Encontre e edite o que você procura — seletores e propriedades agora podem ser pesquisados e escaneados.
Reminificar para produção — embelezado é o formulário de edição, não o envio. formulário.

O que é Embelezador CSS?

Um embelezador CSS expande folhas de estilo compactadas em formato legível canônico: cada bloco de seletor em suas próprias linhas, uma declaração por linha, colchetes e espaçamento consistentes. CSS minificado — .card{margin:0 auto;padding:16px}.card h2{color:#333} — torna-se uma lista de regras que pode ser escaneada, onde encontrar e editar uma propriedade leva segundos.

O CSS de produção é minificado, portanto, qualquer inspeção dos estilos reais de um site ativo começa aqui. O CSS gerado (de construtores, exportadores ou saída do pré-processador) chega igualmente ilegível – embelezar é o primeiro passo padrão antes de entendê-lo ou salvá-lo.

Sobre o Embelezador CSS

Colar CSS minificado ou confuso e obter saída formatada — regras separadas, declarações alinhadas, aninhamento (consultas de mídia, blocos de suporte) recuados.

O que as pessoas embelezam: uma folha de estilo de um site de produção para aprender como um efeito é criado (visualizar código-fonte → copiar → embelezar → pesquisar o nome da classe), tema ou plugin CSS antes de personalizá-lo, estilos de projeto antigos escritos antes de a equipe ter padrões de formatação e CSS de modelo de e-mail montado por ferramentas que nunca ouviram falar de linha quebras.

Editar CSS minificado diretamente é uma clássica falsa economia — uma chave perdida na parede de texto quebra todas as regras seguintes, de forma invisível. Embeleze, edite com a estrutura visível e, em seguida, reduza novamente para envio (o CSS Minifier reverte a viagem de ida e volta sem perdas, menos os comentários do minificador já removido).

Perguntas Frequentes

Não – apenas os espaços em branco e a estrutura das linhas mudam; cada seletor, propriedade e valor sobrevive com bytes idênticos em significado. A renderização não é afetada.

As regras sim, os comentários não – a minificação os excluiu permanentemente. A produção embelezada é estruturalmente fiel, mas livre de comentários; o arquivo de origem original permanece o único registro completo.

Melhor através do DevTools (inspecione o elemento - ele nomeia as regras correspondentes) e, em seguida, embeleze a folha de estilo para ler essas regras no contexto. Os dois fluxos de trabalho se complementam.

O padrão da comunidade: seletor + chave de abertura em uma linha, cada declaração recuada em sua própria linha, chave de fechamento alinhada à esquerda, linha em branco entre as regras - a forma que os linters como o Stylelint esperam.

Sim – os blocos @media, @supports e keyframe recuam suas regras contidas em um nível extra, tornando a estrutura da consulta tão visível quanto as regras dentro dela.