Extendiendo sus estilos CSS

A mediados del año pasado se dio a conocer un proyecto open source llamado Less CSS, el cual nos permite a los desarrolladores web agregar las tan deseadas variables, funciones y mixins a nuestras hojas de estilo. La implementación inicial se realizo en Ruby y luego fue llevada a distintos lenguajes.

Mi experiencia en .Net con .Less

Cuando decidí probar Less CSS estaba desarrollando una duplicación en Asp.Net MVC 2, y decidí utilizar la implementación llamada .Less para .Net. En el momento en que la utilice me decepcionó, la falta de soporte para las reglas de CSS3, reglas especificas para ciertos navegadores (-moz- para firefox o -webkit para Safari/Chrome) o soporte para los hacks para nuestro viejo compañero IE me hicieron dejar de utilizar este proyecto (Al momento de escribir este post tal parece que mejoraron .Less, valdría la pena darle un vistazo de nuevo, este sera tema de otro post).

¡Less.js a escena!

Un par de meses atrás leí acerca de una implementación de Less en JavaScript, la cual hace unos días atrás me decidí a probar. A mi parecer es la mejor implementación que he visto, además de ser desarrollada por el mismo creador de Less CSS, esta librería esta basada en Node.js y dice según su desarrollador ser 50 veces mas rápida que su contra parte de Ruby.

He probado desarrollar un CSS con less y me he enamorado de la facilidad con que extiendo mi CSS y mis habilidades. El tiempo de desarrollo de una hoja de estilo se ve reducido así mismo como su tamaño, esto se logra al usar mixins, que no es mas q usar una clase o función dentro de una regla. Pongamos un ejemplo común agregar esquinas redondeadas a un objeto. Comúnmente había que agregar como mínimo 3 lineas a cada juego de reglas, o crear una clase y agregarse la al objeto al momento de definirlo en html. Este proceso se reduce con Less, veamos el siguiente ejemplo:

.rounded_corners (@radius: 5px) {  
  -moz-border-radius: @radius;  
  -webkit-border-radius: @radius;  
  border-radius: @radius;
} 
#header {   .rounded_corners; } 
#footer {   .rounded_corners(10px); }

Como pueden ver agregar fragmentos de código es muy fácil y se logra un ahorro en el tamaño del archivo al no repetir estas reglas en el #header y el #footer.

Esto sumado a la posibilidad de agregar variables, anidar reglas dentro de sus padres y muchas otras características hacen de esto una gran ayuda al momento de crear sus archivos CSS.

¡OK! Me convenciste, ¿cual es el catch?

No existe una deficiencia tan grande como para no darle una probadita a esta herramienta en alguno de sus proyectos, pero si existen algunos puntos que tomar en consideración:

• Si el usuario no tiene activado Javascript Less.js no podra ejecutarse, por tanto todo el estilo que dependa de Less no se podrá ver.
• El código no es interpretado del lado del servidor, asi que su usuario podrá ver el código de CSS con sus mejoras realizadas en Less

Y la mas Importante:

• Se puede acostumbrar tanto a usar Less que después codificar en CSS plano le puede parecer obsoleto

Si desea probar este proyecto puede dirigirse a su página en GitHub y descargar la última versión.