febrero 11, 2012

Cómo usar #namespaces en Less CSS

Después de haber conocido los mixins vas a querer usarlos en todos lados por el alcance que tienen, misma razón por la que pueden poner confusas las cosas, y ahí es donde entran los namespaces.

Los namespaces son una forma de agrupar estilos, especificamente clases y mixins. Más que una caracteristica de Less CSS son una forma de enfocar y ordenar tus estilos, ya que básicamente son mixins que agrupan diferentes estilos y se utilizan igual.

Si trabajas en un sitio web pequeño, con apenas algunas decenas de líneas de estilos, seguramente no necesites usar namespaces, sin embargo, cuando trabajas en un proyecto gigante con más de tres hojas de estilo, con miles de lineas y cientos de clases entonces podrás tomar una gran ventaja de ellos.

La forma en que un namespace funciona es la siguiente:

#boton{
  .aceptar{  /* ... */  }
  .cancelar{ /* ... */ }
  .error{    /* ... */ }
}

#alerta{
  .aceptar{  /* ... */  }
  .cancelar{ /* ... */ }
  .error{    /* ... */ }
}

En el ejemplo anterior podemos ver dos namespaces, #boton y #alerta, cada uno define estilos diferentes para elementos diferentes, pero al utilizar namespace no hay conflicto con los nombres y el uso de namespaces le añade cierta semántica al código CSS.

Utilizando el ejemplo anterior, la forma de llamar a cada uno de los estilos dentro de los namespaces sería la siguiente:

.alerta_error{
   #alerta .error;
   .boton{
     #boton .error;
   }
}

En este último ejemplo asumimos que dentro del sitio web hay un elemento de clase alerta_error(un DIV si quieres) con un botón adentro de clase boton. Se necesita que el elmento tenga el estilo de alerta y el botón también así que cada uno de ellos llama a la clase .error pero de su respectivo namespace sin que esto genere ningún problema entre ellos.

El uso de namespaces en Less CSS no es necesario, sin embargo si es una practica recomendada y que por experiencia personal te puedo mencionar que es muy útil para reutilizar estilos en diferentes proyectos.

Más información

Un excelente ejemplo del uso namespace nos los da Twitter con su framework Bootstrap que define varios namespaces para diferentes estilos de elemento, por ejemplo #gradients. Bootstrap mixins | http://twitter.github.com/bootstrap/less.html#mixins

Enlace: Documentación oficial sobre Namespaces | http://lesscss.org/#-namespaces