# Qu'est-ce que la Spécificité CSS ?
La spécificité CSS est l'algorithme par lequel les navigateurs décident quelles valeurs de propriétés appliquer à un élément particulier. C'est essentiellement un score mathématique qui indique au navigateur "à quel point" une règle est spécifique.Si deux règles ont des niveaux de spécificité différents, celle avec le poids le plus élevé gagnera, quel que soit l'ordre dans lequel elles ont été écrites. Si les deux ont le même poids, la dernière déclarée dans le code source gagne.# Comment calculer la Spécificité CSS
La spécificité est calculée sur trois catégories formant un poids à trois colonnes, exprimé comme (A, B, C) :- Colonne A (IDs) : Compte le nombre d'identifiants uniques. Exemple :
#headercompte comme 1 dans la colonne A. - Colonne B (Classes, Attributs et Pseudo-classes) : Compte toutes les classes (
.button), attributs ([type="text"]) et pseudo-classes (:hover). - Colonne C (Éléments et Pseudo-éléments) : Compte tous les éléments HTML (
div,h1) et pseudo-éléments (::before).
# La règle d'or: pas de report numérique
Une règle avec la spécificité (0,50,0) ne sera jamais plus spécifique qu'une règle (1,0,0). Un seul ID bat infiniment de classes. Les colonnes ne se déversent jamais les unes dans les autres.
# Le problème de !important et l'architecture BEM
La directive!important est une exception aux règles de spécificité. Quand elle est utilisée, cette déclaration écrase automatiquement toute autre. Elle est considérée comme une mauvaise pratique car elle détruit la cascade naturelle.Pour éviter les guerres de spécificité dans les grands projets, des méthodologies comme BEM préconisent d'utiliser uniquement des sélecteurs de classe à un seul niveau de profondeur, maintenant artificiellement la spécificité plate à (0,1,0).