Clarificación del uso de id y class

Aunque este epígrafe podría situarse en la parte del curso dedicada al código semántico, lo incluyo aquí porque la mayor parte de las veces cuando se confunden estos dos atributos —o se abusa del segundo— el motivo suele ser un conocimiento muy superficial de CSS.

A pesar de que la descripción de id y class de HTML 4.01 (inglés) es cristalina:

id […] This attribute assigns a name to an element. This name must be unique in a document.

[id (…) Este atributo asigna un nombre a un elemento. Este nombre debe ser único en un documento.]

class […] This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names.

[class (…) Este atributo asigna un nombre de clase o conjunto de nombres de clases a un elemento. Cualquier número de elementos pueden tener asignados el mismo nombre o los mismos nombres de clase.]

sorprende la cantidad de dudas que parecen surgir entre los recién iniciados en CSS, que tachonan de clases sus documentos y sólo excepcionalmente recuerdan usar algún identificador.

¿A qué se debe esto? Pues a que muchos de nosotros comenzamos a desarrollar ayudados de editores visuales, de esos que se conocen por un acrónimo impronunciable, WYSIWYG. Cuando estos programas empezaron a aplicar estilos en lugar del ignominioso font, lo hicieron por medio de span y una clase. Y claro, aquellos que hurgábamos en el código identificábamos usar estilos con esta sintaxis. Sólo los que no nos quedamos en ese punto inicial, nos pusimos a estudiar y nos iluminamos, comprendimos que hacerlo de ese modo no era mucho mejor —desde el punto de vista semántico— que lo que hacíamos hasta entonces.

Como ya expuse en la sección del curso dedicada al código semántico, id y class no son meras «anclas» para aplicar estilos, sino que conllevan un significado, sobre todo el primero. Éste se emplea para identificar un elemento estructural importante del documento, como puede ser la cabecera, el menú de navegación, el contenido principal o el pie, o un elemento único al que hay que otorgar especial relevancia. Por su parte, class se aplica a todos aquellos elementos entre los que se establece alguna relación significativa, por ejemplo, cuando diferentes elementos tienen en común ser un tipo de vínculo especial, u ofrecer una advertencia.

Por si alguien no lo leyó en el prefacio a este curso, aquí dejo la traducción de lo que dice al respecto de este tema Andy Budd en CSS Mastery, que sería una lectura obligada una vez introducido el tema. Pero por si se tiene prisa, resumo aquí las ideas principales:

• Primera Ley Inmutable de CSS: «Si no eres capaz de hacer un buen marcado, tu hoja de estilo será una mierda». No lo enuncia de una forma tan explícita, pero es la idea básica que discurre bajo el texto.
• El uso de id y class debe aportar contenido semántico al documento:
  • Se deben asignar a los elementos en consonancia con su valor estructural o su importancia, no meramente para aplicar estilos.
  • Los nombre asignados deben describir la función del/los elemento/s, no su aspecto. Así que ya sabe qué hacer con ese .subrayado14pxAzul.
  • Es más efectivo aplicar estilos a través de identificadores en conjunción con selectores avanzados que apliando clases.
• Los identificadores y las clases se pueden aplicar a cualquier elemento, así que no hace falta encerrar cada elemento en un div o un span adicional.

Aplicar estas simples directrices ayuda al mantenimiento de las hojas de estilo y mejora el marcado de las páginas, pero además, aunque Budd no lo mencione, se convierten en algo vital para trabajar después con la capa de comportamiento del documento, algo que veremos en la sección correspondiente al DOM.

Y si algún escéptico piensa que eso «no se puede aplicar en una página real» de esas con las que tenemos que trabajar cada día, le diré que en el documento que está leyendo sólo aplico cuatro clases, y que el total de las que tengo en los tres estilos principales de todo el sitio no llegan a sumar veinte. Para ofrecer un dato comparativo, la portada de MSN —que no suele ser un ejemplo de buenas prácticas de marcado ni de aplicación de estándares— en el momento en que escribo acumulaba cincuenta y tres clases… cuando me aburrí de contar en el primer tercio de la portada. Si sus documentos presentan una densidad más tendente a ésta que a la mía, le aconsejo que repase su estructura semántica.