soy Kseso y esto EsCSS

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

Este es el artículo con el que colaboré en la iniciativa de @flodar: octuweb.web y que se publicó originalmente el 16 de Octubre de 2014 en dicha página. Una vez finalizada esta entrega de Octuweb.com la publico en el blog para que también la tengáis disponible aquí.

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

Por Kseso ✎ 0

Este artículo fue mi colaboración con la iniciativa de @Flodar Octuweb. Salió publicado el 16 de Octubre de 2014. Una vez concluida esta entrega lo publico aquí para que también esté disponible para los lectores del blog.
Gracias a su promotor, Félix, por darme la oportunidad de participar en Octuweb y cederme ese espacio.

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.

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

Bob Dylan: Man gives name to all the animals

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.

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

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.

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.

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).

Es un error nombrarlas pensando en el selector Css y el navegador. 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).

Este artículo fue el mi colaboración con la iniciativa de @Flodar Octuweb. Salió publicado el 16 de Octubre de 2014. Una vez concluida esta entrega lo publico aquí para que también esté disponible para los lectores del blog.
Gracias a su promotor, Félix, por darme la oportunidad de participar en Octuweb y cederme ese espacio.

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso

Comentarios: 0

EsCss RSS del Blog RSSS Comentarios ᛯ Licencia Beerware Humans.txt ᛯ Diseño por Kseso SiteMap