Minificador CSS
Reduce archivos CSS y mira exactamente cuánto ahorraste.
Funciona en tu navegador. Nada de lo que escribes se envía a ningún sitio.
- Muestra bytes ahorrados
- Elimina comentarios
- Nada se sube
Cómo minificar CSS
- Pega tu CSS.
- Revisa el tamaño ahorrado en la fila de estadísticas.
- Copia o descarga el CSS minificado.
Qué se elimina
- Comentarios escritos como /* ... */
- Espacios en blanco y saltos de línea entre reglas y declaraciones
- Un punto y coma final justo antes de una llave de cierre
- Reglas duplicadas o redundantes, donde csso puede combinarlas de forma segura
- Puntos y coma extra y bloques de reglas vacíos sin declaraciones dentro
Ahorro de tamaño típico
| Punto de partida | Cuánto más pequeño, aproximadamente |
|---|---|
| CSS escrito a mano con comentarios | 20 a 30 por ciento |
| CSS ya compacto | 5 a 10 por ciento |
| CSS generado por un preprocesador | 10 a 20 por ciento |
Cuándo minificar, y cuándo no
- Minifica justo antes de desplegar, no mientras editas activamente, ya que una hoja de estilos legible es mucho más rápida de depurar.
- Evita minificar un archivo que ya se sirve comprimido con gzip y pequeño, donde la diferencia de tamaño no compensa el paso extra de build.
Cuándo minificar marca más diferencia
- Hojas de estilos compartidas en muchas páginas, ya que los bytes ahorrados se multiplican en cada carga de página.
- Grandes sistemas de diseño o bibliotecas de componentes con muchas reglas repetidas y combinables.
- Sitios sin un proceso de build, donde el CSS escrito a mano se sirve directamente sin ningún otro paso de minificación.
- Un framework de CSS recortado a solo las clases de utilidad realmente usadas en la página.
Preguntas frecuentes sobre Minificador CSS
¿Cuánto se reducirá mi CSS?
Normalmente entre un 10 y un 30 por ciento, más si el original tiene muchos comentarios y espacios en blanco, menos si ya es compacto.
¿Minificar cambia el aspecto de mi página?
No. Minificar solo elimina espacios en blanco, comentarios y sintaxis redundante. Las reglas que se aplican a tu página siguen siendo las mismas.
¿Esto combina reglas duplicadas?
Sí, cuando es seguro hacerlo, lo que puede reducir el archivo más allá de solo quitar espacios en blanco.
¿Debería guardar el archivo original?
Sí. Guarda la versión legible para editar y usa la minificada solo en producción.
¿Qué minificador usa esto?
csso, el mismo minificador de CSS que usan varios plugins de empaquetadores. También combina algunas reglas duplicadas y redundantes más allá de solo quitar espacios en blanco.
¿Sigue siendo seguro pegar CSS minificado en una hoja de estilos?
Sí, es CSS estándar sin los espacios en blanco. Cualquier navegador o herramienta de build lo lee exactamente igual que el original.
¿Elimina prefijos de proveedor que todavía necesito, como -webkit-?
No. Las propiedades y valores con prefijo de proveedor se mantienen exactamente como se escribieron. Minificar solo elimina espacios en blanco, comentarios y reglas que se pueden combinar de forma segura, nunca una propiedad que tu CSS realmente declara.
¿Qué pasa con las propiedades personalizadas de CSS (variables)?
Se mantienen tal cual, incluidos sus nombres y valores con --, ya que minificar no renombra ni resuelve las propiedades personalizadas.