DÍA 12 / 2014

Nombres de Clases por su apariencia. ¡No son semánticas?

Si hay un trabajo duro y desesperante, incluso más que declarar CSS para compatibilizar con los IE's, es el dar nombre al valor del atributo "class" del HTML. Y si una vez decidido, y tras revisar el documento el día después, no te arrepientes del elegido podrás sentirte cual padre primerizo al que los suegros no desheredan por el nombre del primogénito.
Y para lograr bautizar correctamente al atributo "class" no basta con ser metódico. Eso es el segundo paso. El primero ha de ser conocer la naturaleza del elemento, su contenido y /o función en el documento. Así estarás cumpliendo con el primer mandamiento: semántica web.


Man gave name to all the classes, in the beginning, it´s a hard work

Bob Dylan: Man gave name to all the animals

Nota del Autor: este artículo es complementario y continuación del publicado aquí

Dice el consorcio en sus tips para webmasters [Quality Assurance] sobre el nombre del valor del atributo class:

Usa "class" pensando semánticamente
A menudo la gente usa nombres de clase como "bluetext" o "redborder". Una mejor manera de nombrar a sus clases es con el rol que el elemento tiene en el HTML.
Los buenos nombres no cambian
Piensa en las razones para que algo luzca de cierta manera, no en la apariencia que quieres que tenga. El aspecto siempre pueden cambiar, pero las razones para darle ese aspecto siempre permanecerán igual.
W3C Quality Assurance

Función del atributo class

El papel del atributo class en el HTML ya lo resumió Nicolas Gallager en su artículo "About HTML semantics and front-end architecture" [Marzo 2012]:

  • Los nombres de clase comunican poca o ninguna información semántica útil a las máquinas o visitantes humanos, a menos que formen parte de Microformatos.
  • El propósito principal de un nombre de clase es ser un gancho para CSS y JavaScript. Si no necesitas agregar presentación y comportamiento al documento web, entonces probablemente no necesitas clases en el código HTML.
  • Los nombres de clase deben comunicar información útil a los desarrolladores. Ayuda cuando se lee un fragmento del DOM para entender lo que un nombre de clase determinada va a hacer, especialmente en equipos multi-desarrollador.

Con la llegada y uso generalizado de los atributos de autor podemos desvincular al atributo class del papel de ser un nexo para javascript y dejarlo en exclusiva para ser usado como selector en las hojas de estilo.

Llevaremos un paso más adelante aquello de separación entre contenido y presentación.

Así, en caso de necesitar que Javascript actúe sobre algún elemento en concreto, nada como usar dicho atributo de autor. Un marcado del tipo data-js='Lo_que_hago' aporta bastante más información y ayuda al desarrollador, más limpieza y valor semántico al documento que otro valor más añadido al atributo class.

Clasificación semántica del atributo class

Hay un cierto acuerdo cada vez más extendido (y camino de convertirse en consenso) a la hora de clasificar el valor del atributo class en tres categorías y en base a ellas poder darle nombre correctamente:

  1. Por la función del elemento en el documento.
  2. Por el contenido del elemento.
  3. Por su presentación (aspecto).

Cualquier otra clasificación puede englobarse en una de estas. Y si no, es que no debería estar. Podrás prescindir de él.

Sobre las 2 primeras creo que no será necesario extenderse. Son ese grupo de elementos que deben su presencia a la función que desempeñan (como iconos de redes sociales, elementos de call to action o el universal clearfix) entre los primeros y entre los segundos algunos tan típicos como post--content, list--social, user--avatar...

Nombre semántico de clase por su presentación

Con esta categoría es fácil que más de uno discrepe. Pero regresa a la primera cita del artículo: la razón de su aspecto, no en su aspecto.

Recogiendo, de nuevo, las palabras de Nicolas Gallager del artículo enlazado con anterioridad:

... Sin embargo, no todo lo semántico tiene que ser derivado del contenido. Los valores del atributo "class" no pueden ser "asemánticos". Sea cual sea el que se use: tienen un significado, tienen un propósito. La semántica del valor del atributo "class" puede ser diferente de la de los elementos HTML.
Nicolas Gallager

A poco que recapacites verás que sin ser consciente de ello, detrás de muchos valores está esta clasificación. Todos los que son utilizados para la composición del layout que se basan en grillas se engloban en ella. Cualquiera de los miles de frameworks las incluyen.

Al igual que ocurre con valores como error, float-left, align-center.

Porque la presentación (aspecto) de un elemento no es sólo su apariencia estética. También su tamaño, la posición que ocupan y la relación que establecen con el resto de elementos.

Clasitis

Al igual que en su momento la web se vio infestada por lo que se conoció como divitis y la vacuna llegó en forma de mantra Hazlo simple, estúpido, en la actualidad muchas webs pecan de clasitis: un sin número de valores en el atributo class.

Hay quienes lo justifican en la web modular, ahora en boga llamarlo diseño atómico.

Sin embargo, en la actualidad es sencillo prescindir de nombres en el valor del atributo class y con ello hacer más eficiente y fácil de mantener tanto el HTML como las hojas de estilo.

El siguiente código HTML seguro que te resultará familiar.

<... class="btn btn-primary btn-lg">
<... class="btn btn-primary btn-sm">

Para ser utilizados como selectores CSS y así estilizar el elemento y diferenciarle del resto de similares declarando tantas reglas como clases posibles haya.

Sin embargo, todo es susceptible de hacerse más simple y eficiente.

<... class="btn-primary-lg">
<... class="btn-primary-sm">
[class*='btn-'] {
/*comunes*/
}
[class*='-primary'] {...}
[class*='-secundary'] {...}
[class*='-lg'] {...}
[class*='-sm'] {...}

Este aspecto lo puedes ampliar [aquí].

Metodología en la generación del valor de class

Todo lo precedente sólo es el primer paso, como mencionaba en la introducción del artículo, para dar nombre al valor del atributo 'class'.

Con ello en mente, ahora sí puedes hacerlo. Será un poco menos duro, pero lo será si quieres hacerlo bien. Para ello sólo necesitas tener presente unas pautas mínimas:

Claridad y precisión

Haz que los nombres de clases sean todo menos enigmáticos y ambiguos. Sé claro y preciso. Que trasmitan, sin necesidad de tener que consultar un manual o guía, las razones para asignarle un valor a la clase y no la apariencia que tendrá (declaraciones concretas en el CSS) en un momento dado. Estas últimas, con el tiempo cambiarán.

Metódico

Ya trabajes solo o integrado en un grupo de personas, hazte con una metodología lógica y sencilla para asignar nombres. No importa cuál sea. Puedes seguir propuestas tan extendidas como BEM [bloque - elemento - modificador].

Piensa en el elemento HTML no en su selector CSS

En muchas ocasiones la tendencia es dar nombre al valor del atributo class pensando en la construcción del selector CSS en vez de hacerlo poniendo el foco en el elemento HTML (su función, su naturaleza y/o su presentación).

Lo considero un error. Hoy por hoy CSS, en el documento que desarrolla los selectores [Selectors Level 4], provee de tal cantidad de ellos y tan precisos (más de 100 si contamos los tipos de elementos) que sería posible construir la hoja de estilos sin necesidad de usar el selector de clase (o id).

Kseso

Ramajero Argonauta virtual. Enredique amanuense de CSS.
Por una web con mucho y buen estilo.