Minificar CSS

Normalmente, cuando el programador escribe código CSS, lucha en todo momento con varios factores clave, que podríamos delimitar en los siguientes:

• Funcionamiento: El código debe estar bien escrito y funcionar correctamente en la mayoría de navegadores disponibles para el usuario, incluyéndo dispositivos de escritorio, como móviles y tablets.

• Legibilidad: Correcta indentación que facilite la legibilidad de las propiedades y valores CSS por humanos, favoreciendo la velocidad de modificación e introducción de cambios.

• Tamaño: Cuanto más texto tenga un archivo CSS (espacios, líneas en blanco, comentarios...), más grande será el tamaño final del archivo, por lo que más tiempo tardará en descargarse.

• 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, en pintar y renderizar 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, así que lo que se suele hacer es mantener un archivo legible (el primero) para realizar modificaciones y trabajar con él, y luego, de forma opcional, un archivo con la información condensada (el segundo) que será el que se utilice finalmente en nuestro proyecto cuando esté terminado.

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: