Comprendre l'Héritage et la Cascade en CSS

Introduction à l'Héritage CSS

L'héritage en CSS est le mécanisme par lequel certaines propriétés CSS sont automatiquement transmises des éléments parents à leurs enfants. Imaginez que vous ayez une famille où les enfants héritent de certaines caractéristiques de leurs parents. En CSS, c'est un peu pareil : si vous définissez une propriété sur un élément parent, certains de ses enfants hériteront de cette propriété, sauf si vous la redéfinissez spécifiquement pour eux.

Propriétés Héritées vs. Propriétés Non-Héritées

Toutes les propriétés CSS ne sont pas héritées. Par exemple, les propriétés relatives au texte (comme font-family, color, font-size) sont généralement héritées, tandis que les propriétés de boîte (comme margin, padding, border) ne le sont pas.

Exemple :

body {
  font-family: Arial, sans-serif;
  color: blue;
}

p {
  font-size: 16px;
}

Contrôler l'Héritage

Vous pouvez contrôler l'héritage en utilisant le mot-clé inherit. Cela force un élément à hériter de la valeur d'une propriété de son parent, même si cette propriété n'est normalement pas héritée. Vous pouvez également utiliser le mot-clé initial pour remettre une propriété à sa valeur par défaut (définie par le navigateur), ou le mot-clé unset pour la remettre à sa valeur héritée si elle est normalement héritée, ou à sa valeur initiale si elle ne l'est pas.

Exemple :

div {
  border: 1px solid black;
}

p {
  border: inherit;
}

Introduction à la Cascade CSS

La cascade est le mécanisme par lequel le navigateur décide quels styles appliquer à un élément lorsqu'il y a plusieurs règles CSS qui s'appliquent. Imaginez que vous ayez plusieurs personnes qui vous donnent des instructions sur la façon de vous habiller. La cascade est comme le processus qui détermine quelles instructions vous allez suivre en priorité.

Facteurs Déterminant la Cascade

Plusieurs facteurs influencent la cascade :

• Origine : Les styles définis par l'utilisateur ont généralement la priorité sur les styles définis par l'agent utilisateur (le navigateur), qui ont eux-mêmes la priorité sur les styles définis par l'auteur (vous, le développeur).
• Spécificité : Les sélecteurs plus spécifiques ont la priorité sur les sélecteurs moins spécifiques. Par exemple, un sélecteur d'ID (#titre-principal) est plus spécifique qu'un sélecteur de classe (.important), qui est lui-même plus spécifique qu'un sélecteur de balise (p).
• Ordre d'apparition : Si deux règles ont la même spécificité, la dernière règle déclarée dans la feuille de style a la priorité.
• Importance : Les règles déclarées avec le mot-clé !important ont la priorité sur toutes les autres règles, quel que soit leur origine, leur spécificité ou leur ordre d'apparition. Il est généralement déconseillé d'utiliser !important, car cela peut rendre le style plus difficile à gérer.

Calcul de la Spécificité

La spécificité d'un sélecteur est calculée en fonction du nombre d'ID, de classes (et d'attributs), et de balises qu'il contient. Un sélecteur avec plus d'ID est plus spécifique qu'un sélecteur avec plus de classes, qui est lui-même plus spécifique qu'un sélecteur avec plus de balises. Les pseudo-classes et les pseudo-éléments sont comptés comme des classes. Les sélecteurs universels (*), les combinateurs (>, +, ~) et la pseudo-classe :not() n'affectent pas la spécificité.

Ce qu'il faut retenir

• L'héritage en CSS permet aux propriétés CSS d'être transmises des éléments parents à leurs enfants.
• Toutes les propriétés CSS ne sont pas héritées.
• Vous pouvez contrôler l'héritage avec les mots-clés inherit, initial et unset.
• La cascade détermine quels styles appliquer à un élément lorsqu'il y a plusieurs règles CSS qui s'appliquent.
• La cascade est influencée par l'origine, la spécificité, l'ordre d'apparition et l'importance.
• Les sélecteurs plus spécifiques ont la priorité sur les sélecteurs moins spécifiques.
• Les règles déclarées avec !important ont la priorité sur toutes les autres règles.