Minificador de CSS
Reduzca una hoja de estilos quitando comentarios y espacios, sin romper una sola regla.
Minificar CSS online
Cada byte de CSS tiene que descargarse y analizarse antes de que el navegador pueda mostrar la página, así que conviene mantener las hojas de estilo pequeñas. Minificar elimina todo lo que el navegador no necesita: comentarios, sangría y espacios opcionales. Esta página es el formateador de código configurado para CSS, con un ejemplo ya minificado.
Qué se queda y qué se va
| Antes | Después |
|---|---|
.card { margin : 0 auto ; } | .card{margin:0 auto} |
width: calc(100% - 32px); | width:calc(100% - 32px) |
a > b | a>b |
/* comment */ | eliminado |
El espacio dentro de calc() tiene que quedarse, porque 100%-32px no es CSS válido. Lo mismo ocurre con el espacio de 0 auto, que separa dos valores.
¿Minificar, comprimir o ambas cosas?
La minificación y la compresión del servidor se suman. Gzip o Brotli en el servidor suelen reducir un archivo CSS entre un 70 y un 80%, y minificar antes ahorra un poco más. Si su herramienta de build ya minifica, no necesita esta página para producción; está pensada para los fragmentos que se saltan el build: estilos en línea en emails, CSS crítico pegado en un head o una hoja de estilos en un sitio sin paso de build.
Herramientas relacionadas
Para quitar las reglas que una página nunca usa, lo que ahorra mucho más que minificar, use el eliminador de CSS no utilizado. Para los scripts que acompañan a la hoja de estilos, use el minificador de JavaScript.