Spécificité CSS

Découvrez ce que signifie la spécificité CSS et pourquoi c'est important

Que se passe-t-il lorsqu'un élément est ciblé par plusieurs règles, avec différents sélecteurs, qui affectent la même propriété?

Par exemple, parlons de cet élément:

<p class="dog-name">Roger</p>

Nous pouvons avoir

.dog-name {
  color: yellow;
}

et une autre règle qui ciblep, qui définit la couleur sur une autre valeur:

p {
  color: red;
}

Et une autre règle qui ciblep.dog-name. Quelle règle prévaudra sur les autres et pourquoi?

Entrez la spécificité.La règle la plus spécifique l'emportera. Si deux règles ou plus ont lemême spécificité, celle qui apparaît en dernier gagne.

Parfois, ce qui est plus spécifique dans la pratique est un peu déroutant pour les débutants. Je dirais que c'est aussi déroutant pour les experts qui ne regardent pas ces règles aussi souvent ou qui les négligent tout simplement.

Comment calculer la spécificité

La spécificité est calculée à l'aide d'une convention.

Nous avons 4 emplacements, et chacun d'eux commence à 0:0 0 0 0. La fente à gauche est la plus importante et celle la plus à droite est la moins importante.

Comme cela fonctionne pour les nombres dans le système décimal:1 0 0 0est supérieur à0 1 0 0.

Slot 1

Le premier emplacement, le plus à droite, est le moins important.

Nous augmentons cette valeur lorsque nous avons unsélecteur de type. Un type est un nom de balise. Si vous avez plusieurs sélecteurs de type dans la règle, vous incrémentez en conséquence la valeur stockée dans cet emplacement.

Exemples:

p {
} /* 0 0 0 1 */
span {
} /* 0 0 0 1 */
p span {
} /* 0 0 0 2 */
p > span {
} /* 0 0 0 2 */
div p > span {
} /* 0 0 0 3 */

Slot 2

Le deuxième slot est incrémenté de 3 choses:

  • sélecteurs de classe
  • sélecteurs de pseudo-classes
  • sélecteurs d'attributs

Chaque fois qu'une règle rencontre l'une de celles-ci, nous incrémentons la valeur de la deuxième colonne à partir de la droite.

Exemples:

.name {
} /* 0 0 1 0 */
.users .name {
} /* 0 0 2 0 */
[href$='.pdf'] {
} /* 0 0 1 0 */
:hover {
} /* 0 0 1 0 */

Bien entendu, les sélecteurs de slot 2 peuvent être combinés avec les sélecteurs de slot 1:

div .name {
} /* 0 0 1 1 */
a[href$='.pdf'] {
} /* 0 0 1 1 */
.pictures img:hover {
} /* 0 0 2 1 */

Une bonne astuce avec les classes est que vous pouvez répéter la même classe et augmenter la spécificité. Par exemple:

.name {
} /* 0 0 1 0 */
.name.name {
} /* 0 0 2 0 */
.name.name.name {
} /* 0 0 3 0 */

Slot 3

L'emplacement 3 contient la chose la plus importante qui peut affecter votre spécificité CSS dans un fichier CSS: leid.

Chaque élément peut avoir unidattribut attribué, et nous pouvons l'utiliser dans notre feuille de style pour cibler l'élément.

Exemples:

#name {
} /* 0 1 0 0 */
.user #name {
} /* 0 1 1 0 */
#name span {
} /* 0 1 0 1 */

Slot 4

L'emplacement 4 est affecté par les styles en ligne. Tout style en ligne aura la priorité sur toute règle définie dans un fichier CSS externe, ou à l'intérieur dustylebalise dans l'en-tête de la page.

Exemple:

<p style="color: red">Test</p> /* 1 0 0 0 */

Même si une autre règle du CSS définit la couleur, cette règle de style en ligne sera appliquée. Sauf pour un cas - si!important is used, which fills the slot 5.

Importance

La spécificité n'a pas d'importance si une règle se termine par!important:

p {
  font-size: 20px !important;
}

Cette règle prévaudra sur toute règle avec plus de spécificité

Ajouter!importantdans une règle CSS va rendre cette règle plus importante que toute autre règle, selon les règles de spécificité. La seule façon dont une autre règle peut avoir préséance est d'avoir!importantainsi, et ont une plus grande spécificité dans les autres emplacements moins importants.

Des astuces

En général, vous devez utiliser la quantité de spécificité dont vous avez besoin, mais pas plus. De cette façon, vous pouvez créer d'autres sélecteurs pour écraser les règles définies par les règles précédentes sans devenir fou.

!importantest un outil très débattu que CSS nous offre. De nombreux experts CSS déconseillent son utilisation. Je me retrouve à l'utiliser surtout lorsque j'essaie un style et une règle CSS a tellement de spécificité que je dois utiliser!importantpour que le navigateur applique mon nouveau CSS.

Mais généralement,!importantne devrait avoir aucune place dans vos fichiers CSS.

En utilisant leidattribut au style CSS est également beaucoup débattu, car il a une spécificité très élevée. Une bonne alternative consiste à utiliser des classes à la place, qui ont moins de spécificité, et sont donc plus faciles à utiliser, et elles sont plus puissantes (vous pouvez avoir plusieurs classes pour un élément, et une classe peut être réutilisée plusieurs fois).

Outils pour calculer la spécificité

Vous pouvez utiliser le sitehttps://specificity.keegan.st/pour effectuer automatiquement le calcul de spécificité.

C'est utile surtout si vous essayez de comprendre les choses, car cela peut être un bon outil de rétroaction.

Téléchargez mon gratuitManuel CSS


Plus de didacticiels CSS:


Tech Wiki en ligne!