!important en CSS : le dernier recours qui casse la cascade

Un style qui refuse de s'appliquer malgré une règle qui semble pourtant correcte est l'un des moments les plus frustrants du CSS. Neuf fois sur dix, la cause n'est pas un bug du navigateur mais une autre règle, ailleurs dans la feuille de style, qui gagne la priorité. La tentation est alors d'ajouter !important à la propriété concernée pour forcer la victoire.

Cette solution fonctionne presque toujours, ce qui est justement le problème : elle traite le symptôme sans jamais expliquer pourquoi l'autre règle gagnait, et elle laisse une bombe à retardement pour la prochaine personne qui essaiera de surcharger cette valeur.

Définition

!important est une déclaration ajoutée à la fin d'une valeur CSS qui fait sortir cette règle du calcul normal de la Cascade. Une propriété marquée !important l'emporte sur toute autre déclaration de la même propriété sur le même élément, quelle que soit sa Spécificité, sauf face à une autre déclaration elle aussi marquée !important et plus spécifique.

.bouton {
  color: blue;
}

.bouton {
  color: red !important; /* celle-ci gagne, même écrite avant */
}

La syntaxe est stricte : le point d'exclamation colle au mot important, sans espace entre les deux, et un espace le sépare de la valeur.

Comment il modifie l'ordre de priorité

Normalement, le navigateur choisit la règle gagnante en comparant la spécificité de chaque sélecteur, puis, à égalité, en gardant la dernière déclarée. !important court-circuite cette logique : toutes les déclarations importantes sont d'abord départagées entre elles, avant même de regarder les déclarations normales.

Ce dernier cas est le piège classique : deux !important qui se disputent la même propriété obligent à en ajouter un troisième, encore plus spécifique, pour trancher. C'est le début d'une escalade que personne ne gagne vraiment.

Les rares cas légitimes

Le cas d'usage défendable reste étroit : surcharger un style imposé par un outil tiers dont vous ne contrôlez pas le code, un plugin, un widget embarqué, ou une bibliothèque qui applique des styles en ligne difficiles à cibler autrement. Dans ce contexte précis, !important n'est pas une facilité, c'est souvent la seule prise disponible.

Une autre utilisation reconnue est la classe utilitaire volontairement absolue, par exemple .hidden { display: none !important; }, dont le rôle est justement de ne jamais être surchargée par accident. Là, la priorité forcée fait partie du contrat de la classe, pas un accident de parcours.

Pourquoi c'est un dernier recours, pas une habitude

Un projet où !important se répand perd sa lisibilité : la feuille de style ne suit plus l'ordre dans lequel elle est écrite, et corriger un style en modifie parfois un autre, à un endroit sans rapport apparent, parce qu'un !important oublié continuait de s'appliquer. Un Calque de cascade bien pensé, ou simplement un sélecteur mieux ciblé, résout la grande majorité des cas où !important semblait la seule issue.

Questions fréquentes

Non dans l'autre sens : un style en ligne (attribut style) a normalement priorité sur une feuille externe, mais un !important écrit dans une feuille externe l'emporte tout de même sur un style en ligne sans !important. Seul un !important en ligne bat un !important externe moins spécifique.

Non, son coût en performance est nul : le navigateur calcule la cascade de la même façon quoi qu'il arrive. Le vrai coût est humain, en temps perdu à comprendre pourquoi une valeur ne bouge plus malgré des modifications répétées.

Non, l'interdire totalement pousse parfois à des sélecteurs artificiellement compliqués juste pour gagner en spécificité, ce qui est pire. La bonne règle est de le réserver aux utilitaires assumés et aux styles tiers, et de le proscrire dans le CSS métier ordinaire.