Minificar CSS

Cuando el desarrollador escribe código (no sólo CSS, sino también HTML o Javascript) tiene que mantener un equilibrio entre varios factores clave, entre los que destacamos:

• 1️⃣ Funcionalidad: El código debe estar bien escrito para funcionar correctamente. Siempre. Además, se debe cuidar el correcto funcionamiento en diferentes navegadores (crossbrowser), diferentes sistemas operativos (incluyendo dispositivos de escritorio, móviles y/o tablets), los cuales suelen tener diferencias considerables.

• 2️⃣ Legibilidad: El código debe estar correctamente indentado y escrito, facilitando la legibilidad por otros humanos (o incluso nosotros después de algún tiempo), favoreciendo la velocidad lectura y cambios (mantenibilidad).

• 3️⃣ 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 del archivo, por lo que más tiempo tardará en descargarse, y probablemente, en procesarse por el navegador.

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

¿Qué es la minificación?

La minificación (en inglés: uglify o minification) es la acción de eliminar carácteres, espacios en blanco o comentarios en un archivo de código (.html, .css o .js, por ejemplo) ya el navegador no los necesita para correcta ejecución.

El objetivo es 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 para reducir el tamaño del archivo CSS, condensando toda su información, eliminando espacios, nuevas líneas, 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) que serán los que editemos y modifiquemos, mientras que los archivos minificados se generarán a partir de estos mediante herramientas automatizadas.

Antiguamente, los archivos minificados se guardaban con extensión .min.css en lugar de .css. Hoy en día no suele ser necesario, ya que solemos guardar los originales en src/ y los generados y minificados en dist/.

Ejemplo visual de minificación

A continuación, para entenderlo mejor, veamos como es el código de un mismo archivo .css con su contenido sin minificar y minificado:

.page {
  background: linear-gradient(blueviolet, hotpink);
  height: 50vh;
  border-width: 10px;
  border-style: solid;
  border-color: black;
}

<div class="page"></div>

.page{background:linear-gradient(#8a2be2,hotpink);height:50vh;border:10px solid #000}

<div class="page"></div>

Como se puede ver, ambos ejemplos producen exactamente el mismo resultado. Sin embargo, el tamaño y la legibilidad del archivo .css se reduce considerablemente. Al ser un archivo de tan pocas líneas, no hay demasiada diferencia, pero a medida que el archivo sea más grande, la diferencia también crece.

Observa que las herramientas de minificación no sólo se basan en eliminar espacios, sino que también suelen hacer operaciones de optimización (cambiar black por #000, o blueviolet por #8a2be2) o similares, con el objetivo de ahorrar carácteres.

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. El archivo minificado es el que se utiliza en la web definitiva que leerá el navegador.

Herramientas de minificación

Existen múltiples herramientas para minificar CSS. Hoy en día, muchas de estas herramientas están integradas en automatizadores o herramientas de desarrollo.

Algunas de las más populares son las que vemos a continuación:

• ⚠️ Cuidado, son herramientas antiguas. No se recomienda su uso.

Es importante tener en cuenta que es poco frecuente hoy en día utilizar estos minificadores de forma manual, ya que estos minificadores de código suelen venir incorporados en unas herramientas denominadas automatizadores o empaquetadores. Son algo más complejos y conviene profundizar en ellos cuando se tenga más conocimiento y experiencia. El objetivo es que no tengamos que preocuparnos de estas y otras tareas repetitivas que podría estar haciendo una máquina.