L'attribut id existe depuis les débuts du HTML pour donner un nom unique à un élément de la page. En CSS, il donne naissance à un sélecteur puissant mais capricieux, qui mérite d'être manié avec précaution.
Beaucoup de développeurs découvrent le sélecteur d'id avant celui de classe, tout simplement parce qu'il ressemble à un nom propre. Le problème, c'est que cette apparente simplicité cache un piège qui complique la maintenance d'un projet une fois qu'il grossit.
Définition
Le sélecteur d'id cible l'unique élément HTML dont l'attribut id correspond au nom indiqué, précédé d'un dièse dans la feuille de style. Un élément <header id="en-tete"> est ciblé par le sélecteur #en-tete.
Unicité de l'id dans la page
La règle HTML est stricte : un id ne doit apparaître qu'une seule fois par page. Deux éléments partageant le même id créent un document invalide, et le comportement du navigateur devient alors imprévisible, en particulier pour tout script qui cherche cet id.
/* cible l'unique élément avec id="menu-principal" */
#menu-principal {
position: fixed;
top: 0;
}Une spécificité très élevée
Dans le calcul de Spécificité, qui départage deux règles ciblant le même élément, un id pèse beaucoup plus lourd qu'une classe, un attribut ou une pseudo-classe. Concrètement, une seule règle basée sur un id l'emporte sur une règle qui empile dix classes. Ce poids énorme rend la règle très difficile à surcharger ailleurs dans la feuille de style, sauf à ajouter un autre id ou à utiliser !important, ce qui aggrave encore le problème pour la suite du projet.
Pourquoi on l'évite en CSS
Pour ces raisons, la plupart des équipes réservent l'id à d'autres usages que le style : une ancre de navigation avec href="#section", ou une cible que JavaScript va chercher avec document.getElementById(). Le Sélecteur de classe couvre presque tous les besoins de style au quotidien, avec une spécificité plus faible et plus prévisible, et l'avantage de pouvoir être posé sur plusieurs éléments à la fois.
| Aspect | id | classe |
|---|---|---|
| Nombre d'éléments ciblés | Un seul | Autant que nécessaire |
| Poids dans la spécificité | Très élevé | Modéré |
| Facilité à surcharger | Faible | Bonne |
!important : c'est de retirer le style de l'id et de le déplacer sur une classe.Migrer un projet hérité qui abuse des id
Il n'est pas rare d'hériter d'un projet où le style repose massivement sur des id, souvent parce qu'un ancien développeur cherchait une solution rapide sans connaître les conséquences sur la spécificité. Réécrire toute la feuille de style d'un coup est risqué, mais une migration progressive fonctionne bien : à chaque modification d'un composant, remplacer l'id utilisé pour le style par une classe équivalente, tout en laissant l'id en place s'il sert encore de cible pour une ancre ou un script. Cette approche évite de casser des fonctionnalités qui dépendent de l'id pour d'autres raisons que le style, tout en réduisant progressivement le poids moyen de la spécificité dans le projet. Avec le temps, la feuille de style redevient prévisible, et chaque nouvelle règle peut à nouveau surcharger les précédentes sans recourir à des artifices.
Questions fréquentes
Rien ne l'interdit techniquement, mais dès qu'un projet grandit, ce style devient le plus difficile à modifier ou à réutiliser ailleurs, à cause de sa spécificité trop élevée face aux autres règles.
Non, un id valide doit commencer par une lettre. Les chiffres, tirets et underscores sont autorisés ensuite, mais jamais en première position du nom.
Il faut renommer l'un des deux id pour qu'ils redeviennent uniques, puis vérifier que les sélecteurs CSS et les scripts qui s'appuyaient sur cet id pointent bien vers le bon élément après la correction.