Preprocesadores CSS: estado actual y comparativa
De un tiempo a esta parte, han salido al mercado una serie de preprocesadores CSS, algunos muy buenos, otros regulares y otros muchos mueren por el camino.
De un tiempo a esta parte, han salido al mercado una serie de preprocesadores CSS, algunos muy buenos, otros regulares y otros muchos (como siempre sucede con este tipo modas) mueren por el camino, ya sea por desidia de los propios desarrolladores o quizás por falta de una comunidad que les respalde y aliente constantemente.
Si me tengo que quedar con tres, serían (en orden de preferencia): LESS, SASS y Stylus
Las dos primeras son desarrollos muy maduros y se pueden utilizar sin problemas en cualquier proyecto profesional. Además cuentan con comunidades muy activas que las van mejorando y puliendo poco a poco.
Pero… ¿es para mí?
No voy a listar aquí todas las virtudes de LESS o SASS, ya existen muchos artículos con buenos ejemplos y explicaciones detalladas. Y la documentación de cada uno de ellos es bastante amplia.
Si eres nuevo/a en el mundo de los preprocesadores CSS, deberías quedarte con dos ideas muy concretas:
- Reducirás considerablemente el tiempo de desarrollo, ya que escribirás menos código y este será de más calidad. Échale un ojo a las reglas anidadas y a los mixins. Son las mas vistosas y fáciles de entender e implementar en cualquier desarrollo.
- Tu flujo de trabajo cambiará a mejor, podrás trabajar en local con archivos less y le darás al usuario un css limpio y minizado. Si quieres ampliar este punto, te recomiendo leer LESS, lessphp & minify
Comparativa entre SASS y LESS
A continuación os muestro una comparativa a día de hoy (Diciembre 2011).
| Características | SASS | LESS |
|---|---|---|
| Repositorio | Github SASS | Github LESS |
| Desarrolladores | Alexis Sellier | |
| Github antiguedad | 2006 | 2010 |
| Github versión | 3.1.11 | 1.1.5 |
| Github Watchers | 680 | 3251 |
| Github Forks | 81 | 405 |
| Lenguajes soportados | Ruby | |
| Librerías complementarias |
Me ha sorprendido la diferencia de watchers y forks entre ambos proyectos en Github, siendo claro ganador LESS. Todo esto a pesar de que SASS tiene más antigüedad y triplica el número de desarrolladores.
Mi teoría es que en la comunidad “no-ruby” hemos estado esperando mucho tiempo algo similar a SASS, y ahora que por fin la tenemos hemos ido de cabeza a disfrutar de ella.
Otro punto importante es que la filosofía SASS ha calado como algo evidente y necesario en la comunidad web. Si has trabajado muchos años con CSS, entenderás lo revolucionario que es poder utilizar variables, funciones y reglas anidadas. Antes simplemente no había manera de hacerlo.
Otra circunstancia: los proyectos web son cada vez más complejos y amplios. La planificación y mantenimiento de CSS monstruosas es demasido compleja, algo de lo que muchos de nosotros nos habíamos quejado pero lamentablemente no sabíamos como atacar.
Hemos tenido suerte y todo ha venido rodado, paralelamente han nacido nuevas metodologías y buenas prácticas en el mundo front-end. A destacar OOCSS, Responsive Design y los todavía infravalorados frameworks CSS.
Y digo que hemos tenido suerte, porque no le sacaríamos todo el potencial a OOCSS sin un buen preprocesador que actué como cimiento. A fin de cuentas un Objeto CSS reutilizable e independiente es más sencillo de concebir y programar con una simple regla anidada. Por otra parte, destacados frameworks CSS (por ejemplo: Bootstrap de Twitter, Golden Grid System, 320 and Up o Perkins) ya vienen de fábrica con su propio archivo less o scss, dejando claro que es la forma más adecuada y eficiente de trabajar, independientemente de modas o buzz pasajeros.
PHP: CMS y Frameworks
Si alguna comunidad ha sabido sacarle partido a LESS a sido PHP. Puedes encontrar una implementación en prácticamente cualquiera de sus diversos CMS y frameworks de desarrollo. Para muestra un botón:
Si tu lenguaje de programación favorito es PHP, tienes butaca preferente en el mundo de los preprocesadores CSS, ¿a qué estas esperando?.
IDE de desarrollo
Lamentablemente los programas para trabajar con LESS son aún escasos.
En modo multiplataforma tenemos PHPStorm o WebStorm, ambas de JetBrains, creadores del famoso IntelliJ. Destacar que también tienen soporte nativo para CoffeeScript, SASS y una decena de nuevas tecnologías. Si a esto le sumas su bajo precio (87€ y 61€ respectivamente) entonces se convierten en la mejor opción a día de hoy.
Si eres fan de Dreamweaver ni te molestes, actualmente no tienen soporte ni parece que lo vaya a tener a medio o largo plazo. Quizás es una buena excusa para actualizar tu entorno de desarrollo :)
Y si eres un Apple Boy, tienes Espresso / CSSEdit.
Compiladores
Una mala idea es utilizar el compilador javascript, ya que sobrecargas tu página con (otra) librería de 36 Kb. Aunque si quieres jugar un poco y realizar pruebas rápidas te puede valer.
Casi mejor si compilas desde local con una app, por ejemplo: SimpleLess (multiplataforma) o LESS.app (Mac).
Pero definitivamente la mejor opción es compilar directamente desde servidor:
Resumen
Creo que los desarrolladores front-end hemos gastado ya demasiado tiempo con tonterías del tipo: hacks IE, maquetación al pixel, maquetación sin tablas y el sexo de los ángeles (HTML5 vs. Flash).
Cuando lo realmente importante es aplicar conceptos del tipo orientación a objetos, DRY y la escalabilidad real de nuestras hojas de estilo. Y creo sinceramente que LESS es una pieza fundamental en este nuevo entorno.
¿Y sobre SASS?
Soy consciente que no he profundizado en SASS. Lamentablemente no es mi especialidad, ya que los proyectos en los que trabajo como freelance son casi 100% PHP.
Si quieres ampliar información, la mejor presentación que he leído últimamente es: Sass & Compass: The future of stylesheets now.