CSS !important
Tu as terminé un landing calme avec tokens, Flex, Grid et focus. Optional Advanced commence par un outil que beaucoup de débutants rencontrent trop tôt : !important. Il peut faire gagner une déclaration — et transformer la feuille de styles en cris. Cette session explique ce qu’il fait, pourquoi il existe, et comment rester calme pour presque ne jamais en avoir besoin.
Réponse directe
!important marque une déclaration pour qu’elle gagne les conflits normaux de spécificité et d’ordre source pour cette propriété (dans la même origine). Utilise-le pour un override rare — par exemple une utilitaire qui doit battre une règle tierce non modifiable — pas comme bouton quotidien « force CSS à obéir ». Préfère d’abord un sélecteur plus clair, un ordre plus tardif, ou un petit refactor.
Pourquoi ça existe
Les feuilles de styles se heurtent. Spécificité et ordre source règlent la plupart des disputes. !important est la trappe de secours quand l’échelle normale ne suffit pas : une page hôte hors de ton contrôle, une règle de bibliothèque à surcharger une fois, ou un pic de debug court. Le langage l’inclut parce que le web partage parfois un CSS désordonné — pas parce que chaque conflit débutant mérite un drapeau plus fort.
Syntaxe
Place !important après la valeur, avant le point-virgule :
#title {
color: #9f1239;
}
.note {
color: #0f766e !important;
}
Pour <h1 id="title" class="note">, la classe avec !important gagne la couleur — même si un id bat normalement une classe. C’est tout l’intérêt et tout le risque : tu es sorti de l’échelle du quotidien.
Lien avec la cascade (pas une nouvelle couleur)
!important ne change pas le sens de la propriété. Il change quelle déclaration gagne. Demande d’abord : « un côté est-il important ? » Ensuite, parmi les déclarations important de même origine, spécificité et ordre comptent encore. Parmi les déclarations normales, ta leçon de spécificité reste valable.
Quand deux règles !important s’affrontent
Si les deux côtés crient, la cascade a encore besoin d’un gagnant. Pour les styles auteur de même origine, la spécificité la plus haute parmi les déclarations important gagne ; en cas d’égalité, la règle !important plus tardive gagne.
.card {
border-color: #cbd5e1 !important;
}
.card {
border-color: #0f766e !important;
}
Les deux sélecteurs sont une classe et les deux utilisent !important. La seconde couleur de bordure gagne. Empiler plus de !important ne rend pas le CSS plus sain — ça déplace juste la bagarre dans une pièce plus bruyante.
Un usage rare et honnête
Parfois une utilitaire doit gagner sur un CSS que tu ne peux pas éditer raisonnablement (thème de widget, bloc embarqué). Garde l’override étroit — une propriété, un sélecteur, un commentaire qui dit pourquoi :
/* Override third-party widget link color we cannot edit */
.widget a {
color: #0f172a !important;
}
Ce n’est pas la même chose que d’asperger !important sur chaque couleur de marque « au cas où ». Documente le pourquoi ; retire le drapeau quand le conflit disparaît.
Préfère la correction calme
La plupart des moments « j’ai besoin de !important » sont en réalité « mes sélecteurs sont emmêlés ». Monte la clarté, pas le volume :
/* Tangled: fighting an id with noise */
#hero .cta {
background: #64748b;
}
.cta-primary {
background: #0f766e;
}
/* Calmer: one clear class owns the CTA look */
.cta-primary {
background: #0f766e;
color: #fff;
padding: 0.75rem 1.25rem;
border-radius: 0.5rem;
}
Si le HTML peut porter cta-primary (ou tu retires un id inutile de la guerre de styles), tu gagnes sans !important. Cette habitude scale ; crier non.
Guide de décision
📊 Normal cascade vs !important
| Situation | Prefer | Avoid |
|---|---|---|
| Two of your rules fight | Échelle de spécificité ou ordre plus tard | !important automatique |
| Equal specificity, wrong winner | Déplacer la règle plus bas / clarifier le sélecteur | Marquer les deux côtés important |
| Third-party CSS you cannot edit | Un !important étroit (commenté) | Couvrir tout le widget |
| Debugging which rule applies | !important temporaire, puis le retirer | Drapeaux de debug en production |
| “This color feels important to the brand” | Tokens/classes plus forts | !important émotionnel sur chaque token |
À toi de jouer
- Recrée la paire id vs classe :
#titlemaroon,.noteteal avec!important— confirme le teal sur un élément qui a les deux. - Retire
!importantet confirme le retour du maroon (l’id gagne à nouveau). - Écris deux règles
.cardavecborder-coloret!important— la plus tardive doit gagner. - Refactorise un conflit en simplifiant une classe pour ne pas avoir besoin du drapeau.
- Optionnel : un commentaire d’une ligne au-dessus de chaque
!importantrestant expliquant la contrainte tierce ou hôte.
Erreurs fréquentes
- Traiter
!importantcomme correctif par défaut de chaque conflit - Imaginer que toute la règle est « important » — seul le déclarations portent le drapeau
- Combattre une bibliothèque avec des dizaines de lignes
!importantau lieu d’un override étroit - Oublier qu’un
!importantplus tard égal peut encore te battre - Confondre « important pour la marque » avec le mot-clé CSS — sans lien
Résumé
!importantfait gagner une déclaration sur les conflits normaux de spécificité/ordre pour cette propriété- Il existe pour des overrides rares dans un CSS partagé désordonné — pas pour les conflits d’apprentissage du quotidien
- Deux règles
!importantse départagent encore par spécificité et ordre source - Préfère sélecteurs plus clairs, ordre ou refactor ; garde les vrais usages rares et commentés
- Optional Advanced continue avec les image sprites (
image-sprites)
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut