Minificador/embellecedor de CSS
CSS de entrada
CSS de salida
Acerca de este minificador y embellecedor de CSS
Esta herramienta comprime CSS eliminando comentarios, espacios innecesarios y formato sobrante.
También puedes embellecer CSS comprimido para inspeccionarlo, editarlo, depurarlo o revisarlo con más facilidad antes de usarlo en un proyecto.
Cómo usarla
- Pega tu CSS en el campo de entrada.
- Elige Minificar para comprimir el CSS o Embellecer para formatearlo.
- Copia el resultado y úsalo en tu hoja de estilos o proceso de build.
Consejos
- Usa CSS minificado en producción cuando quieras archivos más pequeños.
- Usa CSS embellecido al revisar fragmentos de terceros o estilos generados.
- En proyectos grandes, mantén el CSS fuente original en tu repositorio.
Comprobaciones tras minificar CSS
Conserva los archivos fuente
Usa el CSS minificado como salida, no como el archivo que editas. Mantén el CSS legible o los archivos del preprocesador en control de versiones.
Revisa los comentarios
La minificación puede eliminar comentarios. Mantén los avisos de licencia y los comentarios de build importantes en la fuente o en la configuración del bundler.
Prueba el impacto en la cascada
La minificación debería preservar el comportamiento, pero verifica siempre el orden de los selectores, las media queries y los hacks de navegador tras copiar la salida.
Prefiere herramientas de build para apps
Para aplicaciones en producción, un bundler o el pipeline del framework suele ser más seguro porque preserva source maps y referencias a recursos.
Comprobaciones de minificación CSS antes de publicar una hoja de estilos
La compresión debe conservar la cascada, sintaxis admitida, custom properties, URLs y compatibilidad con navegadores.
Cascada y orden
Asegura que combinar o reordenar reglas no cambie specificity, layers, fallbacks, overrides ni el orden de origen.
Sintaxis moderna
Prueba custom properties, calc(), funciones de color, nesting, container queries, prefijos y fallbacks.
Assets y source maps
Confirma que las URLs relativas resuelvan desde el archivo emitido y los source maps coincidan con las rutas desplegadas.
Regresión visual
Compara páginas clave entre breakpoints, temas, estados, estilos de impresión y navegadores compatibles.
Herramientas relacionadas
Estas herramientas también pueden resultarle útiles.