¿Qué hace un minificador de CSS?
Una hoja de estilo legible tiene sangrías, saltos de línea, comentarios y a menudo reglas que se repiten en distintas partes del archivo. Minificar el CSS elimina todo lo que el navegador no necesita para aplicar los estilos, de modo que el archivo pesa menos, se descarga antes y bloquea menos tiempo el renderizado de la página.
Esta herramienta usa CSSO, un minificador que va más allá de quitar espacios. Con la optimización estructural activada (lo está por defecto) fusiona reglas con el mismo selector, junta declaraciones repetidas, elimina las que quedan sobrescritas y acorta valores como colores (#ffffff pasa a #fff) o ceros con unidad (0px pasa a 0). Es una de las razones por las que CSSO suele lograr archivos más pequeños que un minificador que solo elimina espacios. Si en algún caso prefieres una minificación más conservadora, puedes desactivarla.
También puedes conservar los comentarios de licencia que empiezan por /*!, algo habitual en librerías de terceros cuya licencia obliga a mantener el aviso. Al terminar verás el tamaño antes y después y el porcentaje ahorrado; si el CSS tiene un error de sintaxis, se muestra el mensaje del analizador. Recuerda que el minificador trabaja con CSS estándar: si escribes en SCSS o Less, compílalo primero y minifica el CSS resultante.
Todo ocurre en tu navegador: el código no se sube a ningún servidor. Tienes una prueba gratis con un archivo o un texto pegado; con ToolStudio Pro el uso es ilimitado y puedes minificar varios archivos .css a la vez y descargarlos en un ZIP.
¿Cómo minificar CSS?
- Pega tu CSS en el cuadro de entrada o arrastra un archivo .css.
- Decide si quieres la optimización estructural y si conservar los comentarios de licencia /*!.
- Pulsa el botón para minificar.
- Comprueba el tamaño antes y después y el porcentaje ahorrado.
- Copia el CSS minificado o descárgalo.
¿Cuándo conviene minificar CSS?
- Publicar una web estática o un tema sin herramientas de build.
- Reducir el CSS crítico que se incrusta en el head de la página.
- Limpiar hojas de estilo heredadas con reglas duplicadas.
- Preparar el CSS de un tema de WordPress, Shopify u otro CMS.
- Ahorrar bytes en el CSS de plantillas de email.
- Comprobar cuánto ocupa realmente una librería CSS antes de añadirla.
Ejemplo de optimización estructural
Si tu hoja contiene .btn { color: #ffffff; padding: 0px 8px } y más abajo .btn { margin: 0 }, CSSO puede fusionarlas en una sola regla: .btn{color:#fff;padding:0 8px;margin:0}. El resultado aplica exactamente los mismos estilos con menos caracteres.
La minificación es compatible con la compresión gzip o Brotli del servidor: primero se elimina lo que sobra y después el servidor comprime lo que queda.
Preguntas Frecuentes
¿La optimización estructural puede cambiar mis estilos?
CSSO solo fusiona y elimina reglas cuando el resultado es equivalente. Si dependes de un orden muy concreto de reglas o de hacks antiguos y notas una diferencia, desactiva la optimización estructural y vuelve a procesar el mismo texto.
¿Qué son los comentarios /*!?
Son comentarios marcados como importantes, normalmente avisos de licencia. Con la opción activada se mantienen en el CSS minificado y el resto de comentarios se eliminan.
¿Puedo minificar SCSS o Less?
No directamente: el minificador trabaja con CSS ya compilado. Para dar formato a archivos SCSS o Less usa el formateador de CSS.
¿Mi CSS se sube a algún servidor?
No. Todo el proceso se hace en tu navegador.
¿Es gratis?
Tienes una prueba gratis por herramienta: un archivo o un texto pegado. Después puedes volver a procesar ese mismo texto con otras opciones tantas veces como quieras, pero para procesar código nuevo necesitas ToolStudio Pro, que te da uso ilimitado de todas las herramientas, varios archivos a la vez descargados juntos en un ZIP y ninguna publicidad. Puedes cancelarlo cuando quieras.