Comprendre et bien utiliser !important en CSS

La déclaration !important en CSS permet de forcer une règle à s’appliquer, même si une autre règle plus spécifique la contredirait. C’est un outil puissant mais à utiliser avec précaution, car il peut rapidement rendre ton code difficile à maintenir.

Elle se place à la fin d’une propriété, juste avant le point-virgule :


color: red !important;

1. Exemple simple avec et sans `!important`

Deux classes définissent la couleur du texte, mais celle avec !important prend le dessus, même si elle est moins spécifique.


.rouge {
  color: red;
}

.force-bleu {
  color: blue !important;
}

Ce texte est bleu car !important l’emporte.

2. Forcer une règle malgré un style inline

Un style inline (dans l’attribut style="") est normalement prioritaire. Mais on peut quand même l’écraser avec !important dans une feuille CSS externe.


div {
  color: green !important;
}

Même avec style="color: orange", une règle externe avec !important peut dominer.

Note : les navigateurs donnent parfois la priorité au style inline avec !important aussi. Le résultat dépend du contexte (ordre, spécificité, source).

3. Cas pratique : désactiver une règle imposée par un thème ou un plugin

Tu veux écraser un style injecté automatiquement par un thème ou un plugin WordPress ? Voici comment faire :


h2.title {
  font-size: 32px !important;
  color: black !important;
}

Le titre est redéfini manuellement malgré d’autres règles CSS en amont.

4. Attention aux abus de `!important`

Utiliser !important partout empêche les règles normales de fonctionner. Si tu en abuses, tu devras toujours « crier plus fort » avec des !important successifs, et le code devient vite ingérable.

💡 Astuce : essaye d’abord d’augmenter la spécificité du sélecteur plutôt que d’utiliser !important.

5. Résumé : quand utiliser `!important` ?

Pour corriger un style injecté que tu ne peux pas modifier directement
Pour faire une exception très ponctuelle
Pour tester ou déboguer rapidement un comportement CSS

Mais évite d’en faire une habitude. Préfère les sélecteurs bien structurés et compréhensibles.

Conclusion

!important est un outil utile en CSS, mais c’est aussi une « arme nucléaire ». Il résout certains blocages rapidement, mais peut aussi rendre ton code plus fragile à long terme s’il est mal utilisé. En gardant une bonne organisation et en ne l’utilisant que lorsque c’est justifié, tu garderas ton CSS propre et évolutif.

1. Exemple simple avec et sans !important