¿Cuál es el punto de usar atributos de ID si los atributos de clase se pueden usar como ID?

El objetivo de un atributo ID es declarar un elemento en una página de la que solo hay una instancia. Esto está bien si hay encabezados y pies de página y demás, pero ahora vivimos en el maravilloso mundo de HTML5, donde tenemos etiquetas semánticas para tales cosas. Ahora, en lugar de tener que hacer esto:

Solo podemos hacer:

Además, otra razón por la que tiendo a mantenerme alejado de los atributos de identificación es porque no son reutilizables. Siempre es bueno escribir código DRY. DRY significa: no te repitas.

Cuando escribe código DRY, está escribiendo código modular que puede usarse una y otra vez, para múltiples elementos diferentes de una página. Por supuesto, esto reduce la cantidad de código que tiene que escribir a largo plazo, pero también sienta las bases para lo que se llama “CSS orientado a objetos” (Introducción a CSS orientado a objetos (OOCSS)).

Sin embargo, los atributos de identificación 100% tienen un lugar en el diseño y desarrollo web. Por ejemplo, son particularmente útiles al declarar selectores de JavaScript.

Por lo tanto, cada vez que vaya a utilizar un atributo de ID en lugar de una clase, asegúrese de comprender por qué lo hará y de que tiene un motivo válido.

Para agregar a la respuesta de Hailey, existe mucha controversia en términos del uso de ID en HTML, y existe el consenso de que, por lo general, solo deben usarse para interactividad o como selectores de jQuery.

patrón singleton traído a html

Creo que estás confundido entre los dos. ID es una etiqueta única, lo que significa que solo puede usar un nombre de ID en todo el html. Mientras tanto, varias etiquetas pueden estar bajo la misma clase. Un nombre de clase se puede usar una y otra vez en un html.