Le guide du débutant sur la spécificité CSS

Avez-vous déjà essayé de remplacer une règle CSS, pour constater qu'elle ne fonctionnait pas comme elle aurait dû ? Ou avez-vous remarqué que lorsqu'un élément est ciblé plusieurs fois avec différentes combinaisons de sélecteurs CSS, une seule règle est appliquée à la fois ? Tout cela est dû aux règles de spécificité CSS.

Les règles de spécificité CSS peuvent être l'un des concepts les plus déroutants à comprendre, en particulier pour les débutants.

Si vous débutez avec CSS, en tant que règle de commande standard, vous pourriez penser que la dernière règle CSS devrait remplacer l'ancienne. Cela semble simple, mais cela ne fonctionne pas toujours de cette façon. Cela dépend de la spécificité CSS, du moment et de la règle CSS à appliquer.

Voyons donc ce qu'est la spécificité CSS et comment l'utiliser efficacement.

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

En termes simples, si vous avez plusieurs sélecteurs CSS pour un élément, celui avec la valeur spécifique la plus élevée sera appliqué.

Différents sélecteurs ont des poids différents et le navigateur décidera lequel est le plus pertinent pour cet élément.

Comment ça marche?

La spécificité d'un sélecteur peut être classée selon les quatre niveaux suivants :

1. Style en ligne ou CSS
2. identifiants
3. Classes, pseudo-classes et attributs
4. Eléments ou pseudo-éléments

Les styles en ligne ou CSS , où le CSS est appliqué directement sur le document HTML, ressemblent à ceci <p> ​​. Les styles en ligne auront toujours le niveau de spécificité le plus élevé.

Les deuxièmes dans cet ordre sont les identifiants , comme #content . Ainsi, tout sélecteur utilisant un ID aura le deuxième niveau de spécificité le plus élevé.

Les classes , les pseudo-classes et les attributs sont les troisièmes dans cet ordre. Ils ressemblent à : .post , :hover et [title] , respectivement.

Les éléments et pseudo-éléments ont le moins de valeur. li et :after sont des exemples de base d'un élément et d'un pseudo-élément.

Le calcul

La valeur de spécificité peut être calculée avec la ligne directrice suivante :

• Style en ligne ou CSS : 1,0,0,0
• ID : 0,1,0,0
• Classe ou pseudo-classe et attribut : 0,0,1,0
• Eléments et pseudo-éléments : 0,0,0,1
• Sélecteur universel(*): 0

Pour vérifier le niveau de spécificité de votre sélecteur, vous pouvez utiliser le calculateur de spécificité.

Règles de base de la spécificité CSS

Maintenant que vous avez une idée de l'organisation de la spécificité, discutons de quelques règles générales et d'exemples !

C'est le code HTML de base que j'utiliserai dans mes exemples. Ici, j'ai une petite liste dans un conteneur avec #content .

 [css] <div id="content"> <ul class="list"> <li>Item 1<li> <li>Item 2</li> <li>Item 3</li> </ul> </div> [/css]

Règle 1

Si vous avez deux ou plusieurs des mêmes sélecteurs pour un élément, ils auront tous la même valeur de spécificité, donc le plus bas ou le dernier sera appliqué.

Dans l'extrait de code CSS suivant, les deux sélecteurs ont la même spécificité, de sorte que la couleur li sera jaune, car elle est placée plus bas sur la ligne.

 [css] ul li{ color: green; } ul li{ color: yellow; } [/css]

Règle 2

Si plusieurs sélecteurs sont utilisés pour un élément, le sélecteur avec la valeur spécifique la plus élevée sera appliqué.

Dans l'exemple suivant, li est ciblé par deux sélecteurs différents et tous deux affectent la couleur de la police. Alors, quelle règle doit s'appliquer ?

Comme l'exemple précédent, dans le concept d'ordre CSS, le second devrait s'appliquer (donc la couleur li serait verte) mais parce que .list li a une valeur de spécificité plus élevée que ul li , la couleur restera rouge.

 [css] .list li{ color: red; } ul li{ color: green; } [/css]

Règle 3

Nous avons vu que la classe l'emporte sur les éléments au niveau de la spécificité, voyons maintenant ce qui se passe avec un ID.

Dans l'exemple suivant, nous avons une classe et un ID ciblant le même élément et affectant la couleur de la police. Encore la même question : quelle règle doit s'appliquer ?

 [css] .list li{ color: red; } ul li{ color: green; } [/css]

Comme mentionné précédemment, l'ID a une valeur de spécificité plus élevée que la classe, les attributs et les éléments, de sorte que la couleur sera bleue. Toujours cibler l'ID pour un niveau de spécificité plus élevé.

Règle 4

!important remplacera tout sélecteur de toute valeur de spécificité. Mais gardez à l'esprit que !important ne doit pas être surutilisé, car il n'est pas considéré comme une bonne pratique CSS.

Si vous êtes l'auteur de votre CSS et que vous ne remplacez pas une règle existante, vous n'aurez guère besoin d'utiliser !important .

Utilisez !important uniquement lorsque vous essayez de remplacer le CSS de quelqu'un d'autre et que votre spécificité ne peut pas l'emporter sur le sélecteur précédent, en particulier lorsque vous ne pouvez pas contrôler l'ordre de placement de votre CSS dans le HTML.

Cela se produira principalement lorsque vous travaillez dans WordPress, où vous trouverez de nombreux fichiers CSS déjà ajoutés par différents plugins et thèmes.

Généralement, le CSS du plugin est spécifique au plugin et utilise des identifiants, inline-css, ou même !important pour une plus grande spécificité, afin d'éviter tout conflit CSS. Pour remplacer ce CSS, vous devez utiliser une spécificité encore plus élevée ; pour ces scénarios, vous pouvez utiliser !important .

Dans l'exemple suivant, je recrée les scénarios précédents, avec li ciblé avec différents sélecteurs CSS, mais vous pouvez voir que !important remplace toutes les règles et la couleur sera jaune.

 [css] #content li{ color: blue; } .list li{ color: red; } ul li{ color: green; } ul li{ color: yellow !important; } [/css]

!important vous donnera le pouvoir d'appliquer votre CSS au-delà de tout niveau de spécificité.

Vous devez être prudent lorsque vous utilisez !important car vous ne pouvez pas outrepasser cette règle. La seule façon de remplacer un !important est d'utiliser un autre !important plus tard dans le CSS, de sorte que votre CSS puisse facilement sembler désordonné si vous n'en comprenez pas la puissance.

Quelques exceptions

Les éléments et les pseudo-éléments ont le moins de spécificité, mais il existe quelques exceptions intéressantes (et légèrement déroutantes !). (Déroutant car ils ne semblent pas suivre les règles que nous venons de voir.)

Dans cet exemple, vous verrez :first-child (pseudo-classe) et :first-line (pseudo-élément). Nous venons d'apprendre que les pseudo-classes auront une spécificité plus élevée que les pseudo-éléments, donc selon cela, la couleur de la première ligne du paragraphe devrait être verte, mais à la place, elle sera rose.

 [css] p:first-child{ color: green; } p::first-line{ color :pink ; } [/css]

Vous pensez peut-être que l'ordre serait un problème ici, mais même changer l'ordre ne changera pas la sortie. Le calculateur de spécificité montre une image différente de celle du résultat.

C'est là que la spécificité devient un peu déroutante. Je ne peux que supposer que la raison de ce résultat est :first-line est plus proche de l'élément et probablement traitée comme un style en ligne. Vous pouvez vérifier jsfiddle pour un autre exemple.

Comment utiliser efficacement la spécificité ?

Si vous comprenez les règles de spécificité CSS, vous pouvez l'utiliser très efficacement et rendre votre CSS réutilisable.

Supposons que vous souhaitiez utiliser le même .button mais avec des couleurs d'arrière-plan différentes, vous configurez donc un sélecteur spécifique : .red-block .button .

 [css] .button{ background: #97bc2d; font-size: 1em; display: inline-block; } .button a{ display: block; color: #fff; padding: 1em 2em; text-decoration: none; } .red-block .button{ background: red; } [/css]

Si .button est enveloppé dans un conteneur .red-block , la couleur d'arrière-plan par défaut du bouton passera au rouge.

La spécificité CSS est très utile lors de la personnalisation de thèmes WordPress, où vous essayez de remplacer le CSS de l'auteur du thème par le vôtre.

Erreurs courantes à éviter

Certaines personnes utilisent des sélecteurs ultra-spécifiques, ce qui n'est pas une bonne pratique. Soyez aussi précis que nécessaire. Par exemple, cet extrait de code cible le li mais est trop spécifique.

 [css] div#content ul.list li{ color: purple; } [/css]

Si vous êtes trop précis avec votre CSS, il deviendra rigide et plus difficile à réutiliser. Vous pouvez facilement écrire .list li au lieu de div#content ul.list li , ce qui rendra votre CSS plus propre.

Ressources additionnelles

• W3 org sur la spécificité
• Calculateur de spécificité CSS
• Bogue Internet Explorer
• Pirater Internet Explorer

Conclusion

Comme vous pouvez le voir, la spécificité CSS est un outil important et chaque développeur front-end devrait l'avoir dans sa boîte à outils. Une compréhension claire de ce concept peut grandement contribuer à faire de vous un bon développeur front-end.