Combinador CSS
Combinar múltiples archivos CSS en uno
Archivos CSS de entrada
CSS combinado
Ejemplos de combinación CSS
Combinar múltiples bloques CSS en un archivo. Usa comentarios para separar secciones:
Reset, base y componentes
El combinador concatena todos los bloques. Usa Ejemplo de arriba para cargar más datos.
¿Qué es un combinador CSS?
Los proyectos CSS suelen dividir estilos en múltiples archivos—reset, base, componentes, utilidades. Un combinador CSS los fusiona en un solo archivo para producción. Menos peticiones HTTP significan tiempos de carga más rápidos. La especificación W3C CSS define el lenguaje; herramientas de build como Vite y Webpack hacen esto en tiempo de build. Esta herramienta lo hace bajo demanda en tu navegador.
Pega múltiples bloques CSS o sube varios archivos .css. La herramienta los concatena en una salida. Se ejecuta completamente en tu navegador; no se envía nada a ningún servidor. Para formatear el resultado, el Formateador CSS. Para minificar, el Minificador CSS.
Cómo usar esta herramienta
Pegar o subir CSS
Pega múltiples bloques CSS en el editor izquierdo (separa con comentarios como /* filename.css */), o haz clic en Subir para seleccionar múltiples archivos .css. Usa Ejemplo para cargar datos de ejemplo.
Revisar la salida combinada
El panel derecho muestra el CSS fusionado. Se preserva el orden. Para validar, el Validador CSS. Para prefijos de vendor, el Prefijador CSS.
Copiar o descargar
Usa Copiar o Descargar para guardar el CSS combinado. Para convertir SCSS o Less primero, SCSS a CSS o Less a CSS.
Dónde ayuda la combinación CSS
Proyectos legacy o sitios hechos a mano pueden tener muchos archivos CSS. Combinarlos reduce peticiones y simplifica el despliegue. Bootstrap y Tailwind usan pipelines de build; esta herramienta ofrece una opción manual rápida. Para extraer CSS de HTML, el Extractor CSS.
Para formatear la salida combinada, el Formateador CSS. Para estilos inline (p. ej. email), CSS a inline. Para convertir entre preprocesadores, CSS a SCSS o CSS a Less.
Preguntas frecuentes
¿Mis datos son privados?
Sí. La combinación se ejecuta completamente en tu navegador. No se envía ningún dato a ningún servidor.
¿Elimina duplicados?
Esta herramienta concatena archivos. No deduplica reglas ni fusiona selectores. Para optimización avanzada, usa herramientas de build como cssnano o PostCSS.
¿Qué pasa con @import?
La herramienta combina el texto tal cual. No resuelve URLs de @import. Incluye o pega el contenido importado manualmente si es necesario.
¿Puedo subir múltiples archivos?
Sí. Usa el botón Subir y selecciona múltiples archivos <code>.css</code>. Se combinan en el orden seleccionado.
¿Importa el orden de los archivos?
Sí. Las reglas posteriores sobrescriben las anteriores cuando la especificidad es igual. Ordena los archivos en el orden en que quieras que aplique la cascada.