Minificar CSS

Dónde están realmente los bytes

La mayor parte del ahorro son espacios y comentarios, que en una hoja de estilos escrita a mano son muchísimos: la sangría, las líneas en blanco entre reglas y los encabezados de sección que hacen navegable un archivo grande son puro lastre una vez que se sirve. Además, los valores se acortan de formas que no pueden cambiar su significado: un color escrito como #ffffff pasa a #fff, 0px pasa a 0 porque el cero no necesita unidad, desaparece el cero inicial de 0.5em, y margin: 10px 10px 10px 10px se reduce a margin: 10px.

Lo que deliberadamente no se hace es lo arriesgado. Unir reglas con declaraciones idénticas, o reordenarlas, cambia la cascada, y la cascada es la parte de CSS en la que dos reglas de igual especificidad se resuelven según cuál va última. Un minificador que reordena de forma agresiva te dará un archivo más liviano y, en una hoja de estilos grande, una página sutilmente distinta. Las declaraciones duplicadas también suelen ser intencionales: se dejan como respaldo para navegadores antiguos que ignoran la segunda.

Las reglas anidadas y la sintaxis moderna de rangos en media queries se rechazan en lugar de minificarse, y vale la pena explicar por qué, porque es lo contrario de lo que hacen la mayoría de las herramientas. El analizador que hay detrás es anterior a ambas funciones, y cuando encuentra algo que no entiende no da ningún error: lo elimina sin avisar, así que un bloque anidado simplemente desaparece del resultado y la página pierde estilos sin que nada lo indique. Rechazar el archivo es la respuesta honesta. Si tu hoja de estilos usa anidamiento nativo o @media (400px <= width <= 700px), usa una de las herramientas de abajo.

Igual que con el marcado, juzga el resultado después de la compresión. Las hojas de estilos se sirven comprimidas con gzip o brotli, y esos algoritmos ya manejan muy bien los espacios repetidos: un archivo que se reduce un 30 % al minificarse quizá solo se reduzca un 5 % en la transferencia. El ahorro es real, y menor que la cifra que aparece.

Si buscas otra cosa

Lightning CSS es la herramienta adecuada para hojas de estilos modernas: entiende el anidamiento, los rangos en media queries, las funciones de color y todo lo agregado en los últimos años, minifica más que cualquier herramienta anterior y, de paso, también transpila la sintaxis nueva para navegadores antiguos. esbuild --minify style.css es casi igual de bueno y extremadamente rápido. Ambos corresponden a un paso de compilación, no a una pestaña del navegador.

La ganancia mucho mayor suele ser eliminar las reglas que no usas. Un sitio construido con un framework de utilidades o una biblioteca de componentes suele enviar hojas de estilos en las que la mayor parte del archivo no coincide con nada de la página, y PurgeCSS, o la compilación del propio framework, reducirá eso en un orden de magnitud. Minificar CSS que no se usa hace más pequeño el CSS que no se usa; eliminarlo es la verdadera solución.