soy Kseso y esto EsCSS

Id sí Id no. Selector de Clase o de Identificador Único

Unos apuntes sobre los atributos id y class, su valor y uso como selectores Css de clase o Id o por valor de atributo.

Id sí Id no. Selector de Clase o de Identificador Único

·Por Kseso ✎ 2
Id sí Id no. Selector de Clase o de Identificador Único

¿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 pienses evalues.

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 pueda o no haber 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, usar el valor de los atributos que tienen los elementos en el documento Html para conformar el selector y así aplicar los estilos (las declaraciones contenidas en la regla) de forma selectiva al elemento del Html deseado.

Y en caso de colisión de estilos declarar la prevalencia de una u otra regla por medio de la especificidad del selector e importancia

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?

Selector por id. Un caso

Recuerda que quienes recomiendan no usar selectores por identificador único lo suelen basar en su alta especificidad y que la regla Css en la que se usan no es reutilizable (en la misma página) proque su valor (el del atributo id) no puede repetirse en el mismo documento.

Supongamos que en tus páginas tienes un elemento que es la sinopsis de cada página. Un párrafo por ejemplo. Y que dicho párrafo va a ser tomado (mediante cualquier lenguaje) para usarse en otras partes distintas a la propia página. Para seleccionar ese párrafo y no otro le asignas un atributo id con su valor.

<p id='sinopsis'> <-- resumen del post --> </p>

A la vez de ese uso de este párrafo en otras partes quieres actuar sobre él en la misma página para diferenciarlo del resto de párrafos (resaltarlo o incluso hasta ocultarlo).

De entrada dos opciones:

  1. Como no me gustan los selectores de identificador único le añado (en el html) un atributo de clase o de autor (data-*) con su valor.
  2. No añado nada al html y uso el marcado ya existente.

La 1ª opción no tiene mucho sentido. Creo. Así que vamos a dejar el marcado Html tal como está (porque además quizás no tengamos acceso a él) y usamos lo que tenemos.

Podríamos usar en el selector Css una pseudoclase estructural si sabemos que siempre es el primer hijo del post o el primer elemento p que aparece. O el n+A.

Podemos, para evitar la incertidumbre anterior, usar el valor del atributo id para conformar nuestro selector. Y son dos selectores los posibles:

  • [id='sinopsis'] {} un selector por valor de atributo.
  • #sinopsis {} un selector por id.

La cuestión y posible peligros de usar una pseudoclse estructural o un selector por valor de atributo es su poca especificidad. Nos podemos encontrar que quizás alguna declaración se vea "pisada" por otras algo más específicas (la cascada también cuenta).

Si esto ocurre, (prevalencia de otras declaraciones sobre las deseadas) habrá que buscar cuál es y o bien hacer más complejo el selector o "cometer otro pecado": !important

Y llegados a este punto, la pelota vuelve a estar en tu tejado:

Si ya tienes un elemento en tu html con el atributo id ¿cuál de los posibles selectores css que puedes usar para estilizarlo es el más eficiente para ti en esa situación y momento concreto?

Y eficiente puede que tenga un significado distinto de persona a persona y de hoja a hoja ;)

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?

Artículo publicado originalmente en Julio de 2012 revisado y ampliado en Mayo de 2015

avatar del Editor del blog

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