Tutorial Less: 11. Espacios de nombres o namespaces en Less

Los espacios de nombres o namespaces son una forma para agrupar clases y mixins en Less y así poder organizar los estilos para facilitar su búsqueda, reutilización, … y también para evitar los conflictos por usar nombres de clases o de mixins repetidos para varias cosas o con los definidos por librerías externas.

Desde el punto de vista organizativo su uso tiene sentido cuando tenemos múltiples hojas de estilo y miles de líneas, si no con tener las clases definidas con un mínimo de cuidado y organización es suficiente. Pero aun en estos casos hay dos puntos a tener en cuenta, la reutilización y la posibilidad de conflictos con otras clases, ya sean externas o nuestras.

Los namespaces son un gran aliado para la reutilización de mixins y clases sobre todo cuando no tenemos una hoja de estilos para cada cosa, de esta forma podemos crear un espacio de nombres por ejemplo para los botones donde guardar todas las clases y mixins de botones y si luego lo queremos utilizar en otro proyecto pues cogemos el namespace completo y sabemos que tenemos todo lo necesario.

Y los conflictos con los nombres no son menos importantes, porque aunque tengas cuidado para definir tus clases siempre existe la posibilidad de que alguno de esos nombres lo utilice alguna de las librerías de estilos que utilices y esto siempre es molesto y una posible causa de errores.

¿Cómo funcionan los namespaces?

Si los mixins utilizan la misma sintaxis que las clases (el «.») porque las podemos ver como clases mejoradas, pues pensando en la poca imaginación o en lo próximos que quieren mantenerse a la sintaxis de CSS pues los espacios de nombres utilizan «#» como los ids.

#mi-primer-namespace {
  .clase-a {...}
  .mixin-1() {...}
  .mixin.2(@a; @b) {...}
}

Así de simple es la definición de un espacio de nombres y la utilización de sus clases y/o mixins es igual de simple.

.mi-clase {
  color: red;
  #mi-primer-namespace > .clase-a;

  &:hover {
  #mi-primer-namespace > .mixin.2(12; 7112);
  }
}

E incluso el «>» se puede omitir, es decir, la forma de utilizar tanto las clases como los mixins de un namespace es la misma que la que hemos visto para llamar a los mixins y el resultado también es el mismo, el contenido se volcará en el lugar en el que se hace la llamada.

Y para terminar un ejemplo muy sencillito con un par de espacios de nombres que tienen clases con los mismos nombres para comprobar lo fácil que es evitar los conflictos con los namespaces en Less.

// Namespace para los botones
#botones {
  .azul {
    border-color: #147;
    color: #147;
  }

  .verde {
    border-color: #852;
    color: #852;
  }
  
  .rojo {
    border-color: #711;
    color: #711;
  }

  .tu-color(@color) {
    border-color: @color;
    color: @color;
  }
}

// Namespace para los avisos
#avisos {
  .azul {
    background: #147;
  }

  .verde {
    background: #171;
  }
  
  .rojo {
    background: #711;
  }

  .tu-color(@color) {
    background: @color;
  }

}

// Uso de ambos namespace
.aviso-info {
  #avisos .tu-color(#819986);
  
  .boton-aceptar{
    #botones .verde;
    padding: 10px;
  }

  .boton-cancelar {
    #botones .rojo;
    padding: 10px;
  }
}

Si el espacio de nombres contiene clases en el CSS resultante también aparecen, en caso de que no se quiera que aparezca basta con añadirles los paréntesis «()» después del nombre para convertirlas en mixins.

#botones .azul {
  border-color: #147;
  color: #147;
}
#botones .verde {
  border-color: #852;
  color: #852;
}
#botones .rojo {
  border-color: #711;
  color: #711;
}
#avisos .azul {
  background: #147;
}
#avisos .verde {
  background: #171;
}
#avisos .rojo {
  background: #711;
}
.aviso-info {
  background: #819986;
}
.aviso-info .boton-aceptar {
  border-color: #852;
  color: #852;
  padding: 10px;
}
.aviso-info .boton-cancelar {
  border-color: #711;
  color: #711;
  padding: 10px;
}

Como se puede ver los estilos resultantes tenemos las propiedades correctas de las clases y mixins utilizados porque al hacer uso de los namespaces evitamos cualquier posible conflicto.