Tout ce que vous devez savoir sur la déclaration !important

La déclaration !important est un mot-clé que vous pouvez ajouter à la fin d'une déclaration CSS pour donner plus de poids à cette valeur. La raison pour laquelle elle est utilisée est liée à la nature du CSS, qui attribue un poids aux valeurs en fonction de l'endroit où elles apparaissent dans la "cascade". Un style CSS sera appliqué en fonction de quatre facteurs selon l'ordre suivant :

• spécificité directe (par exemple les éléments <ul> se voient attribuer une largeur de 300px)
• importance du style (par exemple le style est t'il déclaré dans la feuille de style de l'utilisateur ?)
• spécificité du sélecteur (par exemple les éléments <ul> à l'intérieur d'éléments <div> se voient attribuer une largeur de 400px)
• ordre d'apparition (par exemple le dernier déclaré s'applique)

Quand la déclaration !important est utilisée sur une paire spécifique de propriété/valeur, cette valeur là échappera à la cascade et deviendra, comme son nom le suggère, la valeur la plus importante pour cette propriété, surclassant toutes les autres valeurs.

Voici un exemple simple démontrant l'usage de !important :

#leftSide {
        background-color: #0f0 !important;
}

#header #leftSide {
        background-color: #f00;
}

Dans l'exemple ci-dessus, même si le style du background-color spécifié dans la seconde règle est plus spécifique du fait du sélecteur et est déclaré en dernier, la première règle sera prioritaire du fait de l'ajout de la déclaration !important. Ainsi, la couleur d'arrière-plan de l'élément en question (l'élément #leftSide) sera vert (#0f0) au lieu de rouge (#f00).

Vous pouvez également avoir une déclaration !important qui surclasse une autre déclaration !important. Jetez un coup d'œil à l'exemple suivant :

div #leftSide {
        background-color: #00f !important;
}

#leftSide {
        background-color: #0f0 !important;
}

#header #leftSide {
        background-color: #f00;
}

Les styles ci dessus sont identiques à l'exemple précédent, avec l'ajout d'une autre règle au début, qui comporte également une déclaration !important. Dans cet exemple, la première valeur de la propriété background-color aura la préséance du fait des deux facteurs suivants : d'abord la déclaration contient la déclaration !important, ensuite elle a un sélecteur plus spécifique.

III-A. Cibler Internet Explorer 5 et 6▲

#header {
        width: 300px !important;
        width: 400px;
}

III-B. Surclasser les styles en ligne▲

<div id="header" style="background-color: purple;">
  <p>Praesent dapibus, neque id cursus faucibus</p>
</div>

#header {
        background-color: #f00 !important;
}

III-C. Modifier les styles surclassés dans Firebug▲

Absolument. En fait, je recommande fortement de ne jamais utiliser la déclaration !important. Je sais que c'est une affirmation audacieuse et il y aura manifestement des situations où des développeurs seront tentés de l'utiliser, mais dans 99% des cas il y aura une meilleure solution. Surclasser un style en ligne que vous ne pouvez modifier autrement est probablement la seule raison pour laquelle j'approuverais personnellement son usage. Je code en HTML et CSS depuis environ neuf ans maintenant et je n'ai jamais utilisé la déclaration !important. En fait, pendant longtemps je ne connaissais même pas son existence, ce qui, rétrospectivement, était une bonne chose.

Quelques uns de ses inconvénients :

• favorise un code mal pensé et négligé.
• crée du code qui est moins maintenable.
• surclasse les styles déclarés dans la feuille de style de l'utilisateur, réduisant ainsi l'accessibilité.

Avec ces points essentiels à l'esprit, l'usage de la déclaration !important devrait être pris en considération uniquement après que toutes les autres voies aient été épuisées.

Quand la déclaration !important est utilisée, elle doit être notée après la valeur de la propriété à laquelle vous avez l'intention de donner du poids.

La déclaration !important peut être utilisée avec les propriétés raccourcies. Quand elle est ainsi utilisée, la déclaration !important attribuera plus de poids à chaque valeur déclarée pour la propriété raccourcie. Par exemple :

#header {
    padding: 20px 10px 20px 10px !important;
}

div#header {
        padding-left: 0;
        padding-right: 0;
        padding-top: 0;
        padding-bottom: 0;
}

Avec le code CSS ci-dessus, la première règle, qui déclare le padding avec une propriété raccourcie, aura la préséance sur la seconde règle, même si cette dernière a un sélecteur plus spécifique, déclare le padding avec des propriétés non raccourcies et est déclaré en dernier dans la cascade.

Une déclaration !important qui est définie dans la feuille de style de l'utilisateur aura plus de poids qu'une déclaration définie dans la feuille de style de l'auteur (bien que cela était inversé dans CSS 1). Ceci est vrai même si la feuille de style de l'auteur a la préséance sur la feuille de style de l'utilisateur dans le flux normal de la cascade.

Le principal but de la déclaration !important est de permettre aux utilisateurs qui ont des besoins spécifiques de les inclure dans leurs propres feuilles de styles, afin d'influer sur les paramètres de taille et de couleur de police sans avoir à obéir aux règles de la cascade.

Enfin, il y a eu, de manière surprenante, quelques articles qui ont déclaré que la seule méthode pour surclasser les styles en ligne était la suivante :

div[style] {
        background-color: #f00 !important;
}

Remarquez le sélecteur [style] qui est un sélecteur d'attribut, en complément de la déclaration !important. Dans cet exemple nous sélectionnons tous les éléments <div> pour lesquels est déclaré un attribut style dans le code HTML. Ceci n'est pas nécessaire. La déclaration !important est tout ce qui est nécessaire pour permettre de surclasser les styles en ligne dans l'exemple ci-dessus. Cependant, utiliser le sélecteur d'attribut sélectionne spécifiquement les éléments possédant l'attribut "style". Il peut donc y avoir des usages pratiques à son emploi.

Il est à noter que ce sélecteur d'attribut ne fonctionne pas avec Internet Explorer 6 et 7, cette méthode devient donc moins utile de ce fait.

Note : après y avoir repensé, j'ai réalisé que j'ai négligé un point important : depuis que les styles en ligne peuvent être ajoutés à de nombreux tags HTML qui n'ont pas de classe ou d'id et que nous ne pouvons pas savoir quels tags se voient attribuer des styles, utiliser le sélecteur d'attribut sera le seul moyen de surclasser ces styles. Je peux donc comprendre pourquoi ces articles étaient si intransigeants sur le fait que cette méthode soit la seule pour surclasser les styles en ligne. Cependant, je pense qu'une explication un peu plus précise l'aurait rendu plus clair. Je supposes que vous pouvez aussi utiliser JavaScript pour cibler toutes les balises contenant des styles en ligne pour leur attribuer une classe.

Vous l'aurez compris, n'utilisez pas la déclaration !important avant d'avoir essayé toutes les autres possibilités, et gardez à l'esprit les inconvénients. Si vous l'utilisez, il sera probablement logique, si possible, de placer un commentaire dans votre feuille de style à coté de toutes les déclarations qui vont être surclassées, pour assurer un code plus facilement maintenable.

J'ai essayé de couvrir les points essentiels en relation avec l'utilisation de la déclaration !important, n'hésitez donc pas à laisser un commentaire si vous estimez que j'ai oublié ou mal formulé quelque chose et je serai heureux d'apporter les corrections nécessaires : Commentez.

Tous mes remerciements à Benj., Bovino et Macmillenium pour leur relecture.