Id´s sí Id´s no. Clases o identificadores únicos

¿Es correcto el uso de los selectores únicos? ¿Se deben seguir utilizando o nos apuntamos a la corriente que aboga por olvidarse de ellos?
No es un debate nuevo. Tampoco pretendo darte yo la solución. Sólo quiero que leas y pienses.
En este artículo sólo vas a encontrar unas pinceladas y apuntes. Unas líneas para que puedas pensar por ti mismo y hacer lo que creas más conveniente y en especial que sepas qué y porqué lo haces. Ayudarte a que tengas un criterio propio y fundado.

Pero empezando por el principio: El uso o no de id´s es algo ajeno a las competencias de Css
¡Tóma lo que acabo de soltar!
Déjame, que te lo explico a ver si estás de acuerdo. Si no, abajo tienes los comentarios. Será un placer saber tu opinión al respecto

Definición de Id y Class

La palabra clave id no existe en Css. Es uno de los muchos atributos que pueden aplicarse a los elementos en el marcado html. Al igual que la keyword class

Los id así como las clases se recogen y definen en la recomendación del consorcio "The global structure of an HTML document". Y de ellos dice:

Identificadores de elementos: los elementos id y class

Definiciones de atributos:
id = name
Este atributo asigna un nombre a un elemento. Este nombre debe ser único en un documento.
El atributo id asigna un identificador único a un elemento (lo cual puede ser verificado por un analizador SGML)

class = lista de cdata
Este atributo asigna un nombre de clase o un conjunto de nombres de clase a un elemento. Se puede asignar el mismo nombre o nombres de clase a cualquier número de elementos. Los nombres de clase múltiples deben estar separados por caracteres de espacio en blanco.

Esa es la definición de estos atributos en la especificación. Hasta aquí la única diferencia entre ellos estribaría en que puedan o no haber uno o varios en el mismo documento html.

Si fuese por esto sólo, no habría dudas: olvidarse del uso de id´s sería recomendable.

Función de los id´s y clases

Pero la especificación continúa definiendo las funcionalidades del ambos:

El atributo id tiene varios papeles en HTML:
  • Como selector para las hojas de estilo.
  • Como vínculo destino para vínculos de hipertexto.
  • Como medio de hacer referencia a un elemento en particular desde un script.
  • Como nombre de un elemento OBJECT declarado.
  • Para procesos generales por parte de agentes de usuario (p.ej., para identificar campos cuando se transfieren datos desde páginas HTML hasta una base de datos, para traducir documentos HTML a otros formatos, etc.).
El atributo class, por otra parte, asigna uno o más nombres de clase a un elemento; se puede decir que el elemento pertenece a estas clases. Varios elementos pueden compartir el mismo nombre de clase. El atributo class tiene varios papeles en HTML:
  • Como selector para hojas de estilo (cuando un autor desea asignar información de estilo a un conjunto de elementos).
  • Para procesos generales por parte de agentes de usuario.

Los id´s y clases en Css

Css "lo único" que hace es, en la sintaxis de los selectores, proveer la forma de apuntar a los identificadores únicos o clases que se hayan declarado en el marcado html para poder estilizarlos.
Y en caso de colisión de estilos declarar la prevalencia de uno u otro por medio de la especificidad.

Eso es todo. Que no es poco.

Tu debate del uso de id´s

Bien. Ya tenemos claro qué es qué y para que se pueden utilizar. Así que ahora ya puedes plantearte, desde el punto de vista del marcado html, si debes o no usar id´s o sólo clases. La pregunta que deberías hacerte es otra, creo. Algo así como:

¿En mi proyecto necesitaré hacer uso en un momento dado de alguna de las funciones reservadas a los identificadores únicos y que no tienen las clases?

Pues en función de la contestación habrá o no id´s en tus códigos. Si necesitas declarar el atributo id en tu html posíblemente necesites utilizar el selector correspondiente en la hoja de estilos. Si por el contrario no hay tal atributo ¿para qué una regla css que lo contenga?

Adenda

No mezclar el uso o no de id´s con otro debate muy diferente como es la conformación de los selectores y cuál es la mejor forma de declararlos. Este sí es un aspecto que incumbe plénamente a Css. Pero no es el objeto de este artículo.

Para ésto, selectores más o menos eficientes y cómo construirlos, tienes mucha literatura en la red. Dos ejemplos recientes:
Shoot to kill; CSS selector intent por Harry Roberts en csswizardry.
Crazy Town Selectors por Chris Coyier en css-tricks.

Y tú ¿qué opinas?

Comparte y difunde. Es gratis y agradecido

El Autor del Blog


Un Ramajero a la verita del Tormes.
Aprendiz de todo y Enredique Amanuense de Css.
Argonauta virtual por esos bagos pazco:

No hay comentarios: