Le terme !important donne la chair de poule à la plupart des développeurs front-end. !important est une manifestation directe de problèmes de spécificité; c'est une manière de tricher pour échapper aux guerres de spécificités, mais vient généralement avec un prix élevé. Il est parfois vu comme un dernier recours — une tentative désespérée de parer aux conséquences d'un bien plus grave problème dans votre code.

La règle général est que !important est toujours une mauvaise solution. Mais, pour citer Jamie Mason :

Rules are the children of principles.

C'est à dire, une règle n'est qu'un manière simple et binaire d'adhérer à un principe plus large. Quand vous débutez, la règle “n'utilisez jamais !important” est une bonne règle.

Cependant, lorsque vous avez commencer à faire évoluer et mûrir vos pratiques de développeur, vous comprenez que le principe derrière la règle est simplement de conserver la spécificité au plus bas. Vous apprendre aussi que les règles peuvent être tordues…

!important a une place particulière dans les projets CSS, mais seulement si utilisé avec parcimonie et de manière proactive.

Un usage proactif de !important est lorsque vous l'utilisez avant d'avoir rencontré un problème de spécificité; lorsqu'il est utilisé comme une garantie davantage qu'un pansement. Par exemple:

.one-half {
  width: 50% !important;
}

.hidden {
  display: none !important;
}

Ces deux classes helper, ou utility, sont très spécifiques sur leur intentions : vous ne les utiliseriez que si vous voulez que quelque chose soit rendu à 50% de largeur ou pas rendu du tout. Si vous ne souhaitiez pas ce comportement, vous n'utiliseriez pas ces classes, donc lorsque vous les utilisez, vous voulez définitivement qu'elles s'appliquent.

Nous avons ici un usage proactif de !important qui assurent que ces styles gagnent toujours. C'est un usage correct de !important qui garantie que ces dépassements marcheront toujours, et ne seront pas accidentellement overridés par quelque chose de plus spécifique.

Un usage incorrect, reactive de !important est lorsque l'on l'utilise pout combattre des problèmes de spécififtés après leur apparition : appliquer !important a une déclaration à cause d'une piètre architecture CSS. Par exemple, imaginons que nous ayons ce HTML :

<div class="content">
  <h2 class="heading-sub">...</h2>
</div>

…et ce CSS:

.content h2 {
  font-size: 2em;
}

.heading-sub {
  font-size: 1.5em !important;
}

Ici nous pouvons voir comment nous avons utilisé !important pour forcer les styles .heading-sub {} a overrider activement le sélecteur .content h2 {}. cela aurait pu être évité de différentes manières, incluant une meilleur Selector Intent, ou en évitent le nichage.

Dans ces situations, il est préférable de s'intéresser et de refactorer toute base de règle problèmatique et de limiter la spécificité, en opposition à l'introduction de tels lourdeurs en terme de spécificité.

N'utilisez jamais !important que de manière proactive, et non réactive.