Minificador CSS

Cómo usarlo

1. Pega tu CSS, abre un archivo .css o empieza con el ejemplo.
2. El CSS minificado aparece mientras escribes, con el tamaño antes y después.
3. Cópialo o descárgalo como styles.min.css.

Qué hace

El Minificador CSS usa CSSO, que va más allá de quitar espacios y comentarios:

• Acorta valores: #ff0000 pasa a red, 0px pasa a 0 y padding: 0 16px 0 16px pasa a padding: 0 16px.
• Une reglas con el mismo selector, y selectores con las mismas declaraciones.
• Quita declaraciones que otra posterior en la misma regla sobrescribe.

Solo hace cambios que mantienen el significado de la hoja de estilos, así que las páginas se ven igual.

¿Merece la pena?

Las hojas de estilos impiden que la página se muestre hasta que cargan, así que un CSS más pequeño es un primer pintado más rápido. Minificar suele ahorrar otro 5 a 15 % además de la compresión gzip o Brotli que aplica tu hosting, más cuando la hoja tiene muchos comentarios. Si usas una herramienta de build como Vite, ya minifica el CSS para producción; esta página es para hojas de estilos que escribes y publicas a mano.

Preguntas frecuentes

¿Puede la minificación romper mi CSS?

Los cambios de CSSO mantienen el significado del CSS válido. Los hacks que dependen de sintaxis no válida para navegadores antiguos pueden no sobrevivir. Guarda la versión legible como fuente y minifica una copia.

¿Quita el CSS que no se usa?

No: no puede ver qué selectores usan tus páginas. Herramientas como PurgeCSS lo hacen durante un build.

¿Cómo recupero la versión legible?

Conserva el original. El Formateador CSS vuelve a sangrar el CSS minificado, pero los comentarios se pierden para siempre.

¿Se sube mi CSS?

No. Se minifica en tu navegador.