web-dev-qa-db-fra.com

Quelles sont les implications de l'utilisation de "! Important" en CSS?

Je travaille sur un site web depuis quelques mois, et souvent lorsque j'essaie de modifier quelque chose, je dois utiliser !important, par exemple :

div.myDiv { 
    width: 400px !important;
}

afin de le faire afficher comme prévu. Est-ce une mauvaise pratique? Ou est-ce que la commande !important peut être utilisée? Est-ce que cela peut causer des effets indésirables plus tard dans la ligne? 

htmlcsscss-specificity
176
Kyle

Oui, je dirais que votre exemple d'utilisation de !important est une mauvaise pratique, et il est très probable que cela provoque des effets indésirables ultérieurement. Cela ne signifie pas qu'il n'est jamais acceptable d'utiliser.

Quel est le problème avec !important:

Spécificité est l’une des principales forces à l’œuvre lorsque le navigateur décide de la manière dont le CSS affecte la page. Plus un sélecteur est spécifique, plus son importance est importante. Cela coïncide généralement avec la fréquence à laquelle l'élément sélectionné se produit. Par exemple:

button { 
    color: black; 
}
button.highlight { 
    color: blue; 
    font-size: 1.5em;
}
button#buyNow { 
    color: green; 
    font-size: 2em;
}

Sur cette page, tous les boutons sont en noir. Sauf les boutons avec la classe "mettre en évidence", qui sont bleus. Sauf qu'un bouton unique avec l'ID "buyNow", qui est vert. L'importance de la règle entière (à la fois la couleur et la taille de la police) est gérée par la spécificité du sélecteur.

!important, cependant, est ajouté au niveau de la propriété, pas au niveau du sélecteur. Si, par exemple, nous avons utilisé cette règle:

button.highlight {
    color: blue !important;
    font-size: 1.5em;
}

alors la propriété color aurait une importance plus grande que la taille de la police. En fait, la couleur est plus importante que la couleur dans le sélecteur button#buyNow, par opposition à la taille de la police (qui est toujours régie par l'ID standard en fonction de la spécificité de la classe).

Un élément <button class="highlight" id="buyNow"> aurait une taille de police de 2em, mais une couleur blue.

Cela signifie deux choses: 

  1. Le sélecteur ne communique pas avec précision l'importance de toutes les règles qu'il contient.
  2. La méthode uniquement pour remplacer la couleur bleue consiste à utiliser une autre déclaration!important, par exemple dans le sélecteur button#buyNow.

Cela rend non seulement vos feuilles de style beaucoup plus difficiles à maintenir et à déboguer, mais également à créer un effet Snowball. Un !important mène à un autre pour le remplacer, à un autre encore pour le remplacer, et cetera. Il ne reste presque jamais avec un seul. Même si un !important peut être une solution utile à court terme, il reviendra vous mordre dans le cul à long terme. 

Quand est-il possible d'utiliser:

  • Remplacement de styles dans une feuille de style utilisateur.

C’est la raison pour laquelle !important a été inventé: donner à l’utilisateur le moyen de remplacer les styles de site Web. Il est très utilisé par les outils d’accessibilité tels que les lecteurs d’écran, les bloqueurs de publicité, etc.

  • Ignorer le code tiers et les styles en ligne.

En général, je dirais que c'est un cas d'odeur de code, mais parfois vous n'avez aucune option. En tant que développeur, vous devez avoir pour objectif d’avoir le plus de contrôle possible sur votre code, mais dans certains cas, vous avez les mains liées et vous devez travailler avec ce qui est présent. Utilisez !important avec modération. 

  • Classes utilitaires

De nombreuses bibliothèques et frameworks sont livrés avec des classes utilitaires telles que .hidden, .error ou .clearfix. Ils servent un seul but et appliquent souvent très peu de règles, mais très importantes. (display: none pour une classe .hidden, par exemple). Ceux-ci devraient remplacer tous les autres styles actuellement présents sur l'élément et justifier définitivement un !important si vous me le demandez. 

Conclusion

L'utilisation de la déclaration !important est souvent considérée comme une mauvaise pratique car elle a des effets secondaires qui nuisent à l'un des mécanismes fondamentaux de CSS: la spécificité. Dans de nombreux cas, son utilisation pourrait indiquer une architecture CSS médiocre. 

Il y a des cas dans lesquels c'est tolérable ou même préféré, mais assurez-vous de vérifier que l'un de ces cas s'applique réellement à votre situation avant de l'utiliser. 

237
Stephan Muller

!important force la déclaration à toujours s'appliquer, en procédant comme suit:

  • même si le sélecteur est moins spécifique et de niveau inférieur, il bat maintenant les sélecteurs de spécificité supérieure
  • s'il y a d'autres occurrences de cette déclaration qui remplaceraient normalement celle-ci, elle ne remplacera plus la déclaration importante

La plupart du temps, !important peut être évité car la spécificité des sélecteurs détermine lequel prend effet, ce qui est l'idée de styles en cascade. Cependant, dans certaines situations (je ne me souviens pas exactement de la situation exacte), la spécificité n’est pas aussi logique et je dois forcer !important sur la déclaration.

Raisons pour ne pas utiliser/éviter !important?

  • empêche les utilisateurs d'utiliser des feuilles de style personnalisées (qui ne peuvent désormais pas remplacer les règles marquées comme importantes), ce qui nuit à l'accessibilité pour certaines personnes
  • rend le code plus difficile à lire car l'esprit prend normalement la spécificité assez facilement, mais se rappeler de ce qu'est !important rend la lecture plus difficile
16
Delan Azabani

Je pense qu'il est important que nous abordions à nouveau cette question, ici fin 2014, lorsque davantage de règles seront ajoutées au brouillon de travail, il est si important de ne pas imposer de restrictions à vos utilisateurs. J'ai écrit ce petit exemple pour expliquer un scénario possible dans lequel une telle chose se produit. Ceci est tiré d'un site Web REAL que j'ai visité sur le Web, et je le vois, malheureusement, le plus souvent.

Champs de l'éditeur de texte de formulaire

Vous avez un site Web et votre site Web dépend du remplissage des formulaires et de la modification du texte. Pour essayer de minimiser la fatigue oculaire, essayez de choisir un style qui conviendra à tout le monde, et comme vos utilisateurs visitent principalement la nuit, vous décidez de rendre la couleur de fond blanche, puis de noircir la couleur du texte. . Le formulaire est vide par défaut, vous devez donc taper du texte (cette fois) pour vous assurer qu'il fonctionne:

...
background-color: black; /* I forgot important here, but it works fine on its own */
color: white !important;
...

Quelques mois plus tard , les utilisateurs se plaignent du fait que le blanc sur noir est trop difficile pour les yeux mais que l'autre moitié l'adore, que faites-vous? vous ajoutez un thème personnalisé qui utilise! important pour remplacer les styles internes afin que les DEUX parties soient heureuses, ce pour quoi il est SUPPOSÉ d'être utilisé:

...
background-color: white !important;   
color: black !important;
...

Maintenant, qu'est-ce qui se passe ici? Qu'est-ce que vous attendiez . Si vous vous souvenez correctement des balises! Important du premier jeu, vous auriez remarqué que cela ne fonctionnait pas et vous vous êtes probablement rappelé que vous deviez supprimer les balises! Important. MAIS vous en avez oublié un ..

DROIT, vous obtenez un texte blanc sur un fond blanc et l'utilisateur ne peut plus lire votre page Web s'il tente d'utiliser ce nouveau style (en supposant que vous l'ayez conservé). 

Bien sûr, vous ne le réalisez pas car la zone de texte est vide. Et vous supposez que cela fonctionnera! (L'assomption est le pire ennemi d'un développeur, elle est fière et arrogante).

Faire et suivre des règles implicites

Ainsi, la règle de base ne doit être utilisée que! Important lors de la conception de OVERRIDES avec un ensemble original complet de règles CSS. Rappelez-vous qu’il est destiné aux exceptions et perturbe l’ordre naturel et la signification des CSS en premier lieu. Dans la plupart des cas, vous n'aurez pas besoin de l'utiliser du tout.

Savoir comment les utilisateurs personnalisent leurs couleurs

Avec l'existence d'outils tels que des extensions et la présence de sites tels que 'userstyles.org' et son équivalent élégant, vous courez le risque d'aliéner vos utilisateurs en utilisant le tag! Important! Gardez à l'esprit que le style ne les remplacera pas. 

Ne limitez jamais vos visiteurs

Si vous utilisez! Important sur un style, assurez-vous de permettre à l'utilisateur de désactiver ce style (et je ne veux pas dire par le biais du commutateur interne "marche/arrêt" du navigateur Web). Et pour l'amour du ciel ne pas le faire par défaut.

Les publicités

Les internautes utilisent de moins en moins de style pour supprimer les annonces. Je ne pense donc pas que la protection des annonces avec! Important soit vraiment un problème. Cela ne fera qu'agacer quelqu'un qui essaie de personnaliser votre site.

9
osirisgothra

Un peu tard à cette question mais il dit "peu importe les autres styles appliqués, ignorez-les et utilisez celui-ci". Vous trouverez peut-être un peu déroutant avec le ! infront (du !important) car c’est un opérateur non en javascript, mais en css, il s’appelle un jeton de délimiteur qui indique simplement qu’il doit être prioritaire. Heres un exemple.

Sans !important: 

.set-color{
  color: blue;
 }

.set-color{
  color: red;
 }

sortiesROUGE

!important sur l'attribut du bas (de même)

.set-color{
  color: blue;
 }

.set-color{
  color: red !important;
 }

sortiesROUGE(aurait été rouge de toute façon)

!important sur l'attribut supérieur (de même)

.set-color{
  color: blue !important;
 }

.set-color{
  color: red;
 }

sortiesBLEU(dit ignorer le rouge, utiliser le bleu)

6
garrettmac

Pour moi, utiliser !important est une mauvaise pratique CSS. Cela perturbe le flux naturel dans l'application des règles CSS où les propriétés sont appliquées de haut en bas. Avec !important, la propriété donnera maintenant la priorité à la dernière valeur importante.

C'est comme utiliser le mot clé goto dans les scripts. Bien que ce soit parfaitement légal, il vaut mieux l'éviter.

4
gianebao

Je ne vous conseillerais pas de l'utiliser sauf si c'est une nécessité, ce qui peut parfois être le cas chez vous, car vous travaillez sur un projet existant. Mais essayez de vous en éloigner et d'utiliser le moins possible!

Le problème est que si vous en utilisez trop, l’un peut écraser l’autre par inadvertance. Votre code est également beaucoup moins lisible et quiconque s’en tient à vous pour le préserver va lui arracher les cheveux, car il est très pénible d’essayer de trouver.

Vérifiez ceci: http://webdesign.about.com/od/css/f/blcssfaqimportn.htm

4
Sidharth Panwar

Eh bien, je pense que l'utilisation de !important est parfois "doit faire le travail" si vous voulez recouvrir les propriétés par défaut de wp-plugins.

Je l'ai utilisé seulement aujourd'hui et c'était le seul moyen de terminer mon travail… .. Ce n'est peut-être pas un bon moyen de faire quelque chose, mais c'est parfois le seul moyen de le faire.

1
Emanuel Pietri

Le problème avec !important est qu’avec CSS vous DEVEZ toujours éviter de sélectionner en profondeur (plus de priorité), car à l’avenir, vous ou une autre personne (souvent pour les grands projets) devrez les remplacer. styles SANS changer le style original et alors celui-ci aura une liberté limitée pour le faire. Il devra aussi utiliser !important avec un sélecteur plus profond.

0
gdfgdfg

! important est un facteur, cela peut vaincre votre code pour quelque chose qui est remplacé

la ! cela ne signifie pas logique non pas, comme ici, cela devient déconcertant avec cela parmi ce code. ! important est souvent un problème colossal en informatique.

Par exemple si vous voulez le rendre display: block; mais vous avez déjà défini display: none;:

p {
   display: none;
   display: block !important /*Now overriden*/;
}
<p>Some Paragraph</p>

!important est le mot clé le mieux évité. Quand l'utiliser, cela peut être un temps d'influence. Cliquez sur ce lien pour savoir quand utiliser !important, ! important Style Rule - CSS-Tricks

 Avoid using !important

pas de garance quoi

0
PIZZZZZZZZZZZA is here