Implications et bonnes pratiques

Imaginons que l’on souhaite que le sélecteur .special prenne le pas sur le sélecteur #attention. Ce dernier a une spécificité dix fois supérieure. On pourrait créer un sélecteur #exemple.special, mais l’on ne ferait que déplacer le problème (que se passe-t-il si l’on veut encore outrepasser ce sélecteur ?), et il faudrait de plus pour chaque id pouvant empêcher le jeu de règles associé au sélecteur id de s’appliquer.

<button id="attention" class="special">OK</button>

/* spécificité = 100 */
#attention {
  color: red;
}

/* spécificité = 10 */
.special {
   color: purple;
}

/* le sélecteur .color n'est pas assez prioritaire,
on se retrouve à devoir faire ce qui suit */

/* spécificité = 110 */
#attention.special {
   color: green;
}

Ces problèmes font qu’il est déconseillé d’utiliser le sélecteur d’id et de lui préférer le sélecteur de classe non qualifié et sans combinateur [1].

[1]	https://cssguidelin.es/#ids-in-css