Combinador CSS
Combine dois arquivos CSS em um
Arquivo CSS 1
Arquivo CSS 2
CSS combinado
Exemplos de combinação CSS
Cole dois arquivos CSS — um em cada editor de entrada — e a ferramenta os mescla em uma única folha de estilos:
Reset/base + estilos de componentes
Clique em Exemplo para carregar CSS de exemplo em ambos editores e ver o resultado mesclado instantaneamente.
O que é um combinador CSS?
Projetos CSS frequentemente dividem estilos em múltiplos arquivos — reset, base, componentes, utilitários. Um combinador CSS os funde em um único arquivo para produção. Menos requisições HTTP significam tempos de carregamento mais rápidos. A especificação W3C CSS define a linguagem; ferramentas de build como Vite e Webpack fazem isso em tempo de build. Esta ferramenta oferece um editor de dupla entrada diretamente no seu navegador.
Cole seu primeiro arquivo CSS no editor superior esquerdo e o segundo no editor inferior esquerdo (ou use Enviar em cada painel). O painel direito combina automaticamente ambas as entradas. Tudo roda no seu navegador — nada é enviado a nenhum servidor. Para formatar o resultado, o Formatador CSS. Para minificar, o Minificador CSS.
Como usar esta ferramenta
Colar ou enviar CSS
Cole seu primeiro arquivo CSS no editor superior esquerdo e o segundo arquivo no editor inferior esquerdo. Cada painel tem seu próprio botão Enviar para carregar arquivos .css individualmente. Use Exemplo para carregar dados de exemplo em ambos os editores de uma vez.
Revisar a saída combinada
O painel direito combina automaticamente ambas as entradas. O arquivo 1 aparece primeiro, seguido pelo arquivo 2. Para validar, o Validador CSS. Para prefixos de vendor, o Prefixador CSS.
Copiar ou baixar
Use Copiar ou Baixar para salvar o CSS combinado. Para converter SCSS ou Less primeiro, SCSS para CSS ou Less para CSS.
Onde a combinação CSS ajuda
Projetos legados ou sites feitos à mão podem ter muitos arquivos CSS. Combiná-los reduz requisições e simplifica a implantação. Bootstrap e Tailwind usam pipelines de build; esta ferramenta oferece uma opção manual rápida com dois painéis de entrada dedicados. Para extrair CSS de HTML, o Extrator CSS.
Para formatar a saída combinada, o Formatador CSS. Para estilos inline (ex.: e-mail), CSS para inline. Para converter entre pré-processadores, CSS para SCSS ou CSS para Less.
Perguntas frequentes
Meus dados são privados?
Sim. A combinação é executada completamente no seu navegador. Nenhum dado é enviado a nenhum servidor.
E se ambos os arquivos tiverem o mesmo seletor?
A ferramenta mantém ambos como estão. Isso é seguro porque o cascade do CSS faz com que a última regra prevaleça quando a especificidade é igual — exatamente como os navegadores lidam com múltiplas folhas de estilo. Se você precisar de deduplicação avançada, use ferramentas de build como cssnano ou PostCSS.
E o @import?
A ferramenta combina o texto como está. Não resolve URLs de @import. Inclua ou cole o conteúdo importado manualmente se necessário.
Como envio arquivos?
Cada painel de entrada tem seu próprio botão Enviar. Clique nele para selecionar um arquivo .css para aquele painel. O arquivo 1 vai para o editor superior esquerdo, o arquivo 2 para o inferior esquerdo.
A ordem dos arquivos importa?
Sim. O arquivo 1 aparece primeiro na saída, depois o arquivo 2. Regras posteriores sobrescrevem as anteriores quando a especificidade é igual. Organize seus arquivos conforme necessário.