Preprocesadores de CSS: ¿cuándo utilizarlos?

Los preprocesadores de CSS son herramientas que nos permiten generar hojas de estilo a partir de una sintaxis alternativa, que ofrece más funciones que las que trae la implementación oficial. Por ejemplo, con preprocesadores como Less y Sass podemos utilizar una variable (como rojoclaro) para guardar un color representado en hexadecimal (como #FF9999), evitando tener que repetir o recordar ese código y facilitando las cosas cuando queramos reemplazarlo por otro color. Esto es imposible en la versión oficial de CSS.

Sin embargo, estas herramientas tienen ventajas y desventajas. Por eso, si bien su uso está cada vez más extendido, es bueno saber cuándo utilizarlos y cuándo no.

Utilizar preprocesadores de CSS cuando:

  • Necesitamos una hoja de estilos dinámica, apta para sufrir grandes modificaciones. Por ejemplo, si estamos desarrollando un theme de WordPress con características personalizables, las variables y los mixins permitirán cambiar colores, fuentes y tamaños con rapidez. Muchos frameworks de WordPress le permiten al usuario cambiar características del diseño desde una interfaz amigable; por detrás, lo que ocurre es que se modifican los valores de las variables.
  • Estamos trabajando en un equipo numeroso, y todos deben seguir reglas comunes para una buena coordinación. En ese sentido, un preprocesador puede ser de ayuda, porque organiza mejor el código fuente, facilita su modificación y permite crear un lenguaje común a través de los nombres de variables y de funciones.
  • Vamos a implementar muchas reglas de CSS engorrosas de escribir y difíciles de mantener (por ejemplo, los gradientes, las animaciones o los vendor prefixes). Un preprocesador puede ayudarnos a implementarlas con una sintaxis más compacta y comprensible.
  • Necesitaremos realizar muchas operaciones matemáticas: calcular un porcentaje de un ancho, aumentar el tamaño de una fuente, atenuar un color, obtener la cantidad máxima de columnas en una fila, etc.

No utilizar preprocesadores de CSS cuando:

  • Nuestros archivos CSS (es decir, el resultado de la compilación) deben ser muy livianos.
  • Nuestros archivos CSS serán analizados por personas externas al equipo de trabajo.
  • Dentro del equipo, todos están acostumbrados a preprocesadores diferentes.
  • Todavía estamos aprendiendo la sintaxis y las reglas de CSS.

Uno de los grandes problemas de los preprocesadores es que, luego de la compilación, el código CSS resultante puede no parecerse en nada a nuestro código original. Por eso, cuando descubrimos errores puede ser muy difícil encontrar en qué parte del código se produjeron. Se recomienda comentar bien el código, generar documentación propia y estar atento al escribir cada línea.