quand utiliser! propriété importante en css?

Question

 #div p {
    color: red !important;
}
...
#div p {
    color: blue;
}
 

Je comprends comment !important fonctionne. Dans ce cas, la division sera rendue en rouge car elle est désormais prioritaire ( !important ). Mais je ne peux toujours pas trouver une situation appropriée pour l'utiliser. Est-ce que quelqu'un connaît un exemple où !important économise la journée?

Answer 1

C'est le scénario de la vie réelle

Imaginez ce scénario

1. vous avez un mondial de fichier CSS qui définit les aspects visuels de votre site à l'échelle mondiale
2. vous (ou d'autres) utilisent des styles en ligne sur les éléments eux-mêmes, qui est généralement de très mauvaise pratique

Dans ce cas, vous pouvez définir des styles dans votre fichier CSS comme important, ce qui annule les styles en ligne directement sur les éléments.

Réel l'exemple du monde réel?

Ce genre de scénario se produit généralement lorsque vous n'avez pas un contrôle total sur votre HTML. Penser à des solutions Sharepoint par exemple. Vous souhaitez que votre partie pour être globalement défini (de style), mais certains styles en ligne vous ne pouvez pas le contrôle sont présents. !important fait de telles situations plus faciles à traiter.

D'autres des scénarios de vie réelle serait également inclure un peu de mal écrits plugins jQuery qui utilisent également des styles en ligne...

Je suppose que vous avez eu l'idée, maintenant, et peuvent venir avec quelques autres.

Lorsque vous décidez de l'utiliser, !important?

Je vous suggère de ne pas utiliser !important , à moins que vous ne pouvez pas le faire d'une autre façon. Chaque fois que c'est possible de l'éviter, de les éviter. En utilisant beaucoup de !important styles de faire de l'entretien un peu plus difficile, parce que vous briser le naturel en cascade dans vos feuilles de style.

Answer 2

Écraser l'attribut de style

Dites dans l'exemple que vous ne pouvez pas modifier le code source HTML mais fournissez uniquement une feuille de style. Une personne irréfléchie a giflé un style directement sur l'élément (boo!)

 <div style="background-color:red">
<p>Take that!</p>
</div>
 

! Important peut remplacer cela.

 <style>
   div { background-color: green !important }
</style>
 

Answer 3

C'est un réel, la vraie vie scénario, car il s'est réellement passé hier:

• Z-index problème de jquery dans le dialogue. Autosuggest liste affiche pas correctement

Des Alternatives à pas à l'aide de !important dans ma réponse inclus:

• La chasse en JavaScript/CSS où un certain insaisissable de la propriété a été appliquée.
• Ajout de la propriété avec le JavaScript, qui est un peu mieux que d'utiliser !important.

Donc, un avantage de l' !important est qu'il est parfois un gain de temps. Si vous l'utiliser avec beaucoup de parcimonie, comme cela, il peut être un outil utile.

Si vous êtes à l'aide de ce tout simplement parce que vous ne comprenez pas comment la spécificité des œuvres, vous le faites mal.

---

Une autre utilisation pour !important , c'est quand vous êtes en train de rédiger une sorte de widget externe type de chose, et vous voulez être sûr que vos styles seront ceux appliqués, voir:

• Ajouté le contrôle du CSS problème

Answer 4

Vous utilisez généralement! Important lorsque vous êtes à court d’autres méthodes pour augmenter la spécificité d’un sélecteur CSS.

Ainsi, une fois qu'une autre règle CSS a déjà mélangé des identifiants, des chemins d'accès d'héritage et des noms de classes, lorsque vous devez remplacer cette règle, vous devez utiliser 'important'.

Answer 5

Je dois utiliser !important lorsque j'ai besoin d'écraser le style d'un code HTML généré par un "plugin" JS (comme la publicité, les bannières et d'autres éléments) qui utilise l'attribut "style".

Donc, je suppose que vous pouvez l’utiliser quand vous ne contrôlez pas le css.