Combinador CSS
Combine múltiplos arquivos CSS em um
Arquivos CSS de entrada
CSS combinado
Exemplos de combinação CSS
Combine múltiplos blocos CSS em um arquivo. Use comentários para separar seções:
Reset, base e componentes
O combinador concatena todos os blocos. Use Exemplo acima para carregar mais dados.
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 faz sob demanda no seu navegador.
Cole múltiplos blocos CSS ou envie vários arquivos .css. A ferramenta os concatena em uma saída. É executada completamente 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 múltiplos blocos CSS no editor à esquerda (separe com comentários como /* filename.css */), ou clique em Enviar para selecionar múltiplos arquivos .css. Use Exemplo para carregar dados de exemplo.
Revisar a saída combinada
O painel direito mostra o CSS fundido. A ordem é preservada. Para validar, o Validador CSS. Para prefixos de vendor, o Prefixador CSS.
Copiar ou transferir
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. 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.
Remove duplicados?
Esta ferramenta concatena arquivos. Não deduplica regras nem funde seletores. Para otimizaçã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.
Posso enviar múltiplos arquivos?
Sim. Use o botão Enviar e selecione múltiplos arquivos .css. Eles são combinados na ordem selecionada.
A ordem dos arquivos importa?
Sim. Regras posteriores sobrescrevem as anteriores quando a especificidade é igual. Ordene os arquivos na ordem em que deseja que a cascata se aplique.