Desde hace muchos años el desarrollador web ha estado buscando el santo grial: Un maquetado semántico y fácil de mantener. El uso de hojas de estilos en cascada (CSS) es todo un regalo en ese sentido, ya que nos permite separar el contenido de la presentación. En nuestro afán de perfección y ser más rápidos en el desarrollo se han empezado a crear desde unos años hasta la fecha diferentes frameworks para CSS.

El sentido de un framework para CSS es acelerar y simplificar el desarrollo de aplicaciones web complejas. Gracias a bloques de código predefinidos podemos montar el esqueleto de la aplicación de una manera rápida y con menos errores. Entre los más conocidos se encuentran Blueprint y 960 y su principal característica es poder disponer de un sistema de rejillas donde ir colocando nuestros elementos HTML. Como todo, tiene sus ventajas y sus inconvenientes.

Las ventajas
 

Proporciones divinas: Muchas veces echamos un vistazo a una página web y nos damos cuenta que algo va mal. Suelen ser los espacios. Usando un framework para CSS los contenidos se ajustan en un sistema de rejilla, evitando de esta manera fallar en las proporciones.

Velocidad: Este punto es bastante importante. Usando un framework podemos maquetar un diseño a priori complejo en pocos minutos.

Cross-browser: Los frameworks están desarrollados para que sean compatibles con la mayoría de los navegadores, por lo que podremos minimizar el tiempo de pelea habitual arreglando posibles fallos de compatibilidad entre navegadores.

Los inconvenientes

Curva de aprendizaje: Aprender siempre significa dedicar un tiempo y seguramente usar un framework significará un tiempo de desarrollo mayor en el primer proyecto que usando las técnicas de siempre.

Marcado en el HTML: Los frameworks CSS funcionan marcando el html con los nombres en los elementos la posición que van a tener en la rejilla. Tener que nombrar en el HTML los contenedores según dónde esté colocados en nuestro diseño se aleja totalmente del camino a seguir en nuestra búsqueda del maquetado semántico y fácil de mantener.

Compass aparece en escena, una herramienta que nos promete un maquetado fácil de mantener y que se basa en SASS. En pocas palabras, SASS es un metalenguaje para CSS, gracias al cual con distintas reglas de anidado y de sintaxis podemos disfrutar de un código más DRY (don´t repeat yourself/no te repitas), usar funciones (llamadas mixins) y variables y separar nuestro código en distintos archivos.

Instalación

Para usar compass (y también sass) hace falta tener ruby instalado y una versión de Rubygems superior a la 1.3. Se instala como gema de la siguiente manera:

sudo gem install compass

Una manera de usar compass es de manera autónoma, sin depender de ningún entorno. Una vez instalado para crear un proyecto se ejecuta por ejemplo:

compass -f 960 nombre-del-proyecto.

Esto crea un proyecto con los archivos que hacen falta para usar el framework CSS 960. Ejecutando compass -w dentro del directorio del proyecto se compilan de manera automática nuestros archivos SASS a CSS cada vez que realicemos un cambio.

Con este ejemplo podemos observar la potencia de compass:

1. import 960/grid.sass
2. import funciones.sass
3. import colores.sass
4. 
5. #email_container
6. +grid(12,12)
7. +rounded
8. :background
9. :color = !darkblue
10. .subscribe_text
11. +grid(6,12)
12. .welcome_text
13. +grid(6,12)

En las tres primeras líneas vemos como funciona la importación de otros archivos .sass.

Con # definimos un div con el id email_container.

Con +grid(12,12) llamamos a una función de la librería del framework 960 y colocamos el div en nuestra rejilla ocupando 12 columnas.

Usando +rounded llamamos a una función que hemos definido en otra parte con el típico código CSS3 para crear bordes. Ese código solo tiene que estar definido una vez y lo podemos llamar siempre que queramos. Al tener el código solo en un sitio evitamos errores y conseguimos un desarrollo más rápido.

Con “.” nos dirigimos a dos elementos en el marcado con el tag class subscribe_text y .welcome_text respectivamente. Al estar anidados dentro de email_container, se colocarán dentro de este div. Llamando +grid(6,12) ocuparán 6 columnas de nuestra rejilla cada uno dentro del contenedor email_container.

El signo de exclamación “!”nos sirve para cargar variables. En este caso !darkblue está definido en colors.sass. Las variables son una ayuda tremenda a la hora de refactorizar y realizar cambios.

Posibilidades y Conclusión

Gracias a la posibilidad de incorporar funciones externas (llamados mixins) se está creando una comunidad de usuarios que está empezando a crear librerías con código estándar que a su vez el creador de compass está incorporando en las distintas versiones de compass. Un ejemplo de esto es fancy-buttons, un proyecto que se va a incluir en la próxima versión y que nos facilita la vida a la hora de dar estilos a botones.

Lo que compass puede aportar salta a la vista. Código estándar en librerías, posibilidad de usar variables y funciones, menos errores y un código más limpio. Está claro que debe existir una base en HTML y CSS para usar compass, pero no cabe duda de que es una ayuda extraordinaria a la hora de hacer las cosas bien y un paso hacia adelante en la búsqueda de un maquetado semántico y fácil de mantener.

Links

• http://sass-lang.com/ (referencia SASS)
• http://wiki.github.com/chriseppstein/compass/ (página del proyecto compass-gran tutorial en vídeo) 
• http://960.gs/ (página del proyecto 960) 
• http://github.com/imathis/fancy-buttons (librería de botones para compass)

Juanjo Andrés Prado
Aentos Consulting, S.L.
twitter: juanjoandres
email: juanjo.andres@aentos.es
www.aentos.es