La minificación (minify) o condensación de un archivo CSS es una tarea para conseguir reducir su tamaño eliminando los carácteres superfluos, sin que deje de funcionar.

Normalmente, al codificar en CSS se lucha con dos factores clave:

En archivos CSS muy grandes esto suele influir de forma considerable, por lo que lo ideal es utilizar los llamados Minify (Minificadores) para reducir el tamaño del archivo CSS condensando toda la información, eliminando espacios, retornos de carro, etc... (y por consiguiente, haciéndolo menos legible). Esto es un paso totalmente opcional, que se realiza sólo para reducir el tamaño de los archivos CSS, por lo que no es algo que sea totalmente imprescindible, pero se considera una buena práctica.

Existen incluso algunas herramientas que se encargan de analizar el código y suprimir propiedades repetidas o inútiles. Veamos un ejemplo de un mismo archivo CSS con su contenido sin minificar y minificado:

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

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

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

#main{background-color:#000;color:#fff;padding:16px;margin:4px;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.

Existen múltiples herramientas para minificar código CSS. Veamos algunas de las más populares:

Herramienta Modalidad Características
CSS Minifer Online, API Sencillo y simple.
CSS Compressor Online Opciones variadas: grado de compresión, optimizaciones...
CSS Tidy PHP/C++ Parser open source, personalizable.
Clean CSS NodeJS/NPM Para automatizar desde terminal.
CSS Optimizer NodeJS/NPM Optimizador de CSS (clean, compress and restructuring)
YUI Compressor Java Compresor CSS de Yahoo
Sqwish NodeJS/NPM Compresor de CSS basado en Node
Atom-minify Atom Editor Plugin de minificación para Atom
Manz
Publicado por Manz

Docente, divulgador informático y freelance. Trabaja como autónomo, escribe en Emezeta.com (sitio web de tecnología con +10.000 visitas diarias) y es profesor en la Oficina de Software Libre de la Universidad de La Laguna, en Tenerife (Islas Canarias).