Spécificité CSS

Qu'est-ce que la spécificité CSS ?

La spécificité CSS est l'algorithme qu'un navigateur utilise pour choisir quelle déclaration l'emporte quand plusieurs règles ciblent le même élément avec des valeurs contradictoires. Chaque sélecteur reçoit un poids, et le sélecteur le plus lourd s'applique, quelle que soit sa position dans la feuille de style. La comprendre explique la plupart des situations du type « pourquoi mon style ne s'applique pas ? » en développement front-end.

Comment la spécificité est calculée

La spécificité s'écrit généralement avec trois ou quatre nombres, de la catégorie la plus forte à la plus faible :

• Les styles en ligne (attribut style) l'emportent sur tout sélecteur.
• Les identifiants comme #header comptent dans la première colonne.
• Les classes, attributs et pseudo-classes comme .card, [type="text"] et :hover comptent dans la deuxième.
• Les éléments et pseudo-éléments comme div et ::before comptent dans la troisième.

Le sélecteur universel * et les combinateurs n'ajoutent rien. Les colonnes se comparent de gauche à droite sans retenue : dix classes ne battent jamais un identifiant.

Exemple en code

p { color: black; } vaut (0,0,1).

.intro { color: blue; } vaut (0,1,0).

#hero .intro { color: red; } vaut (1,1,0).

Sur un paragraphe de classe intro placé dans #hero, le texte est rouge, même si la règle noire est écrite en dernier.

Scores de spécificité en un coup d'œil

Spécificité, cascade et !important

La spécificité n'est qu'une étape de la cascade. Le navigateur compare d'abord l'origine et l'importance (!important l'emporte), puis les couches de cascade, puis la spécificité, et enfin l'ordre dans le code en cas d'égalité. Abuser de !important est un piège : le seul moyen de le surcharger est un autre !important plus spécifique, ce qui rend vite une feuille de style impossible à maintenir.

Les outils modernes pour maîtriser la spécificité

• :where() a toujours une spécificité nulle, idéal pour les resets et les valeurs par défaut.
• :is() et :not() prennent la spécificité de leur argument le plus spécifique.
• @layer permet d'ordonner explicitement des groupes de règles, pour qu'une couche de base ne batte jamais une couche de composants.
• Les variables CSS réduisent les surcharges : on change une valeur plutôt qu'un sélecteur.

Bonnes pratiques

• Styler avec des classes, pas avec des identifiants ni de longues chaînes de descendants.
• Garder des sélecteurs courts et à plat, avec une convention de nommage comme BEM.
• Éviter !important, sauf pour des utilitaires qui doivent toujours l'emporter.
• Vérifier la règle appliquée dans les DevTools avant d'ajouter du poids.

La spécificité CSS chez BeBranded

Quand nous construisons des sites sur Webflow, nous suivons une approche « classes d'abord » avec un système de nommage cohérent, ce qui garde une spécificité basse et prévisible et sécurise les refontes. Découvrez notre service de création de site web.