Minificar CSS

Normalmente, cuando el desarrollador escribe código (y no sólo CSS, sino también HTML o Javascript), lucha en todo momento con varios factores clave, que podríamos delimitar en los siguientes:

• Funcionamiento: El código debe estar bien escrito para funcionar correctamente. Además, se debe garantizar el correcto funcionamiento en diferentes navegadores, diferentes sistemas operativos (incluyendo dispositivos de escritorio, móviles y/o tablets), los cuales suelen/pueden tener algunas diferencias entre ellos.

• Legibilidad: Correcta indentación o colocación de las diferentes partes del código, facilitando la legibilidad por humanos, favoreciendo la velocidad de modificación e introducción de cambios (mantenibilidad).

• Tamaño: Cuanto más texto tenga un archivo CSS, HTML o Javascript (espacios, líneas en blanco, comentarios, código no usado...), más grande será el tamaño final del archivo, por lo que más tiempo tardará en descargarse y procesarse por el navegador.

• Rendimiento: Cuanto más costosas sean las operaciones que vamos a obligar a hacer al navegador, más tardará en procesarse y por lo tanto, más tiempo tardará en pintar y renderizar (dibujar) la página.

¿Qué es la minificación?

La minificación (en inglés, Uglify o Minification) es la acción de eliminar carácteres o comentarios de nuestro código, con el objetivo de reducir su tamaño total, y por lo tanto, descargarlos más rápido. En archivos CSS muy grandes esto suele influir de forma considerable, por lo que es una buena práctica utilizar herramientas de minificación y reducir el tamaño del archivo CSS condensando toda su información, eliminando espacios, retornos de carro, etc...

Haciendo esto, conseguiremos que el archivo ocupe menos, pero a cambio, perderemos legibilidad. Por esta razón, es habitual conservar los archivos CSS originales (sin minificar) para trabajar con ellos, y generar los archivos reducidos con herramientas automaticas. Hay que tener en cuenta que el proceso de minification es un paso totalmente opcional, por lo que no es obligado realizarlo, pero se considera una buena práctica de optimización.

Veamos un ejemplo de un mismo archivo CSS con su contenido sin minificar y minificado:

Ejemplo de código CSS legible (index.css): 96 bytes

#main {
  background-color: black;
  color: white;
  padding: 16px;
  border: 2px solid blue;
}

Ejemplo de código CSS minificado (index.min.css): 75 bytes

#main{background-color:#000;color:#fff;padding:16px;border:2px solid #00f;}

Como se puede ver, el tamaño y la legibilidad del archivo CSS se reduce considerablemente. Sería perjudicial trabajar con código del segundo ejemplo, por lo que se suele mantener un archivo legible (el primero) para realizar modificaciones y trabajar con él, y luego, de forma opcional, un archivo con la información minificada (el segundo) que será el que se utilice finalmente en nuestro proyecto cuando esté terminado.

En resumen, el primer archivo es el código para humanos, el que debemos mantener y trabajar con él. El segundo archivo es el código para el navegador, que no se debe modificar directamente por humanos y que se debe generar a partir del primero.

Herramientas de minificación

Existen múltiples herramientas para minificar código CSS. Algunas de ellas, incluso se encargan de analizar el código y, no sólo minificarlo, sino además suprimir propiedades repetidas, eliminar propiedades o valores inútiles, etc. Veamos algunas de las más populares: