Je les déteste, cela défie la nature en cascade du CSS, et si vous ne les utilisez pas avec précaution, vous vous retrouvez dans une boucle pour en ajouter plus !important.

Mais je veux savoir sont-ils mauvais pour la performance?

EDIT
D'après les réponses (rapides), je peux conclure que cela n'aura pas d'impact (significatif) sur les performances. Mais c'est agréable à savoir, même si c'est juste un argument supplémentaire pour décourager les autres;).

EDIT 2
BoltClock a souligné que s'il y a 2 !importantdéclarations, les spécifications indiquent qu'il choisira la plus spécifique.

Cela ne devrait pas vraiment avoir d'effet sur les performances. Voir l'analyseur CSS de Firefox sur/source/layout/style/nsCSSDataBlock.cpp#572 et je pense que c'est la routine pertinente, gérer l' écrasement des règles CSS.

il semble que ce soit simplement une vérification de «important».

  if (aIsImportant) {
    if (!HasImportantBit(aPropID))
      changed = PR_TRUE;
    SetImportantBit(aPropID);
  } else {
    // ...

Aussi, les commentaires à source/layout/style/nsCSSDataBlock.h#219

    /**
     * Transfer the state for |aPropID| (which may be a shorthand)
     * from |aFromBlock| to this block.  The property being transferred
     * is !important if |aIsImportant| is true, and should replace an
     * existing !important property regardless of its own importance
     * if |aOverrideImportant| is true.
     * 
     * ...
     */

1. Firefox utilise un analyseur descendant écrit manuellement. Dans les deux cas, chaque fichier CSS est analysé dans un objet StyleSheet, chaque objet contient des règles CSS.

2. Firefox crée ensuite des arbres de contexte de style qui contiennent les valeurs finales (après avoir appliqué toutes les règles dans le bon ordre)

De: http://taligarsiel.com/Projects/howbrowserswork1.htm#CSS_parsing

Maintenant, vous pouvez facilement voir, dans un cas comme avec le modèle d'objet décrit ci-dessus, l'analyseur peut marquer les règles affectées par le !importantfacilement, sans beaucoup de coût ultérieur. La dégradation des performances n'est pas un bon argument contre !important.

Cependant, la maintenabilité prend un coup (comme d'autres réponses mentionnées), ce qui pourrait être votre seul argument contre eux.

Je ne pense pas que ce !importantsoit intrinsèquement mauvais en termes de rapidité avec laquelle le navigateur correspond aux règles (il ne fait pas partie du sélecteur, seulement une partie de la déclaration)

Cependant, comme cela a déjà été indiqué, cela réduira la maintenabilité de votre code et entraînera donc probablement une croissance inutile de sa taille en raison de modifications futures. L'utilisation de !importantréduirait également probablement les performances des développeurs.

Si vous étiez vraiment difficile, vous pourriez également dire que cela !importantajoute 11 octets supplémentaires à votre fichier CSS, ce n'est pas vraiment beaucoup, mais je suppose que si vous avez un bon nombre de !importants dans votre feuille de style, cela pourrait s'additionner.

Juste mes pensées, malheureusement je n'ai pas pu trouver de repères sur la façon dont !importantpourrait affecter les performances.

!importanta sa place. Faites-moi confiance sur celui-là. Cela m'a sauvé plusieurs fois et est souvent plus utile comme solution à court terme, avant qu'une méthode plus longue et plus élégante à votre problème puisse être trouvée.

Cependant, comme la plupart des choses, il a été abusé, mais il n'y a pas lieu de s'inquiéter de la «performance». Je parie qu'un petit GIF 1x1 a plus de performances sur une page Web que!

Si vous souhaitez optimiser vos pages, il existe bien d'autres ! Itinéraires importants à prendre;);)

Ce qui se passe ici dans les coulisses, c'est que pendant que votre CSS est en cours de traitement, le navigateur le lit, rencontre un !importantattribut et le navigateur revient pour appliquer les styles définis par !important. Ce processus supplémentaire peut sembler être une petite étape supplémentaire, mais si vous traitez de nombreuses demandes, vous subirez un coup dans les performances. (La source)

L'utilisation de! Important dans votre CSS signifie généralement que le développeur est narcissique et égoïste ou paresseux. Respectez les développeurs à venir ...

La pensée d'un développeur lors de l'utilisation !important:

1. Mon CSS à bascule ne fonctionne pas ... grrrr.
2. Qu'est-ce que je devrais faire maintenant??
3. Et puis !importantouais .... maintenant ça marche bien.

Cependant, ce n'est pas une bonne approche à utiliser !importantsimplement parce que nous n'avons pas bien géré le CSS. Il crée beaucoup de problèmes de conception - qui sont pires que les problèmes de performance - mais elle nous oblige aussi à utiliser de nombreuses lignes de code supplémentaires puisque nous prépondérants d' autres propriétés avec !importantet notre CSS devient encombré avec le code inutile. Ce que nous devons faire à la place, c'est d'abord gérer très bien le CSS, et ne pas laisser les propriétés se remplacer les unes les autres.

Nous pouvons utiliser !important. Mais utilisez-le avec parcimonie et uniquement lorsqu'il n'y a pas d'autre issue.

Je suis d'accord avec vous pour ne pas l'utiliser car c'est une mauvaise pratique, quelle que soit la performance. Pour ces seules raisons, j'éviterais d'utiliser !importantautant que possible.

Mais sur la question des performances: non, cela ne devrait pas être perceptible. Il pourrait avoir un certain effet, mais il devrait être si petit que vous ne devriez jamais remarquer, ni devrait vous inquiéter.

S'il est suffisamment important pour être visible, vous avez probablement plus de problèmes dans votre code que juste !important. La simple utilisation d'un élément de syntaxe normal des langages principaux que vous utilisez ne sera jamais un problème de performances.

Permettez-moi de répondre à votre question par une question rétorique en retour; un angle que vous n'avez probablement pas considéré: De quel navigateur parlez-vous?

Chaque navigateur a évidemment son propre moteur de rendu, avec ses propres optimisations. La question devient donc maintenant: quelles sont les implications en termes de performances dans chaque navigateur? Peut-être !importantfonctionne mal dans un navigateur mais vraiment bien dans un autre? Et peut-être que dans les prochaines versions, ce sera l'inverse?

Je suppose que mon point ici est que nous, en tant que développeurs Web, ne devrions pas penser (ou avoir besoin de réfléchir) aux implications de performances des constructions de syntaxe individuelles des langages que nous utilisons. Nous devons utiliser ces constructions de syntaxe car elles sont la bonne façon de réaliser ce que nous ne voulons pas en raison de leur performance.

Les questions de performances doivent être posées conjointement avec l'utilisation de profileurs pour analyser où se trouvent les points de pincement dans votre système. Réparez les choses qui vous ralentissent vraiment en premier. Il est presque certain que vous devrez résoudre des problèmes beaucoup plus importants avant de passer au niveau des constructions CSS individuelles.

Il n'affecte pas sensiblement les performances. Cependant, cela réduit la maintenabilité de votre code et risque donc de dégrader les performances à long terme.

Ayant dû utiliser !importantplusieurs fois auparavant, je n'ai personnellement remarqué aucune performance démontrable atteinte lors de son utilisation.

En note, voir la réponse à cette question de pile pour une raison que vous pourriez vouloir utiliser !important.

Je mentionnerai également quelque chose que tout le monde n'a pas mentionné. !importantest le seul moyen de remplacer le CSS en ligne avant d'écrire une fonction javascript (ce qui affectera vos performances même si ce n'est qu'un petit peu). Cela pourrait donc vous faire gagner du temps en termes de performances si vous avez besoin de remplacer le CSS en ligne.

hmm ...! important ou !! important?

Passons en revue cette étape par étape:

1. L'analyseur doit vérifier! Important pour chaque propriété, que vous l'utilisiez ou non - la différence de performances est donc de 0
2. Lors de l'écrasement d'une propriété, l'analyseur doit vérifier si la propriété en cours d'écrasement est! Importante ou non - donc la différence de performance est de nouveau 0
3. Si la propriété en cours d'écrasement est !! importante, elle doit remplacer la propriété - performance hit de -1 pour ne pas utiliser! Important
4. Si la propriété en cours de réécriture est! Importante, elle ignore l'écrasement de la propriété - augmentation des performances de +1 pour l'utilisation de! Important
5. Si la nouvelle propriété est! Importante, l'analyse doit l'écraser indépendamment de la propriété qui est remplacée est! Importante ou !! importante - différence de performance 0 à nouveau

Donc, je suppose que! Important a en fait de meilleures performances car il peut aider l'analyseur à ignorer de nombreuses propriétés qu'il ne sautera pas autrement.

et comme @ryan le mentionne ci-dessous, la seule façon de remplacer le CSS en ligne et d'éviter d'utiliser javascript ... donc une autre façon d'éviter un impact inutile sur les performances

hmm ... il s'avère que! important est important

et aussi,

• l'utilisation de! important fait gagner beaucoup de temps au développeur
• vous évite parfois de repenser l'ensemble du CSS
• parfois html ou le fichier css parent n'est pas sous votre contrôle, donc il vous sauve la vie
• évite évidemment que des éléments importants soient accidentellement remplacés par d'autres éléments importants!
• et parfois les navigateurs ne choisissent tout simplement pas les bonnes propriétés, sans être trop spécifiques dans les sélecteurs, donc l'utilisation de! important devient vraiment importante et vous évite d'écrire des tonnes de sélecteurs css spécifiques dans votre css. donc je suppose que même si vous utilisez plus d'octets pour l'écriture! important, cela pourrait vous faire économiser des octets dans d'autres endroits. et nous le savons tous, les sélecteurs css peuvent devenir désordonnés.

Donc je suppose que l'utilisation de! Important peut rendre les développeurs heureux, et je pense que c'est très important : D

Je ne peux pas prévoir d' !importantentraver les performances, pas intrinsèquement de toute façon. Si, cependant, votre CSS est criblé !important, cela indique que vous avez dépassé les sélecteurs de qualification et que vous êtes trop spécifique et que vous n'avez plus de parents ou de qualificatifs pour ajouter de la spécificité. Par conséquent, votre CSS sera gonflé (ce qui entravera les performances) et difficile à maintenir.

Si vous voulez écrire CSS efficace alors vous voulez être seulement aussi précis que vous devez être et écrire CSS modulaire . Il est conseillé de s'abstenir d'utiliser des identifiants (avec des hachages), de chaîner des sélecteurs ou des sélecteurs éligibles.

Les identifiants préfixés #en CSS sont vicieusement spécifiques, au point que 255 classes ne remplaceront pas un identifiant (violon par: @Faust ). Les identifiants ont également un problème de routage plus profond, ils doivent être uniques, cela signifie que vous ne pouvez pas les réutiliser pour les styles en double, vous finissez donc par écrire des CSS linéaires avec des styles répétitifs. La répercussion de cette opération variera d'un projet à l'autre, selon l'échelle, mais la maintenabilité en souffrira énormément et, dans les cas extrêmes, les performances aussi.

Comment pouvez-vous ajouter de la spécificité sans !important, chaîner, qualifier ou ID (à savoir #)

HTML

<div class="eg1-foo">
    <p class="eg1-bar">foobar</p>
</div>
<div id="eg2-foo">
    <p id="eg2-bar">foobar</p>
</div>
<div class="eg3-foo">
    <p class="eg3-foo">foobar</p>
</div>

CSS

.eg1-foo {
    color: blue;
}
.eg1-bar {
    color: red;
}
[id='eg2-foo'] {
    color: blue;
}
[id='eg2-bar'] {
    color: red;
}
.eg3-foo {
    color: blue;
}
.eg3-foo.eg3-foo {
    color: red;
}

JSFiddle

D'accord, alors comment ça marche?

Les premier et deuxième exemples fonctionnent de la même manière, le premier est littéralement une classe et le second est le sélecteur d'attributs. Les sélecteurs de classes et d'attributs ont une spécificité identique. .eg1/2-barn'hérite pas de sa couleur .eg1/2-foocar il a sa propre règle.

Le troisième exemple ressemble à des sélecteurs de qualification ou de chaînage, mais ce n'est ni l'un ni l'autre. Le chaînage consiste à préfixer des sélecteurs avec des parents, des ancêtres, etc. cela ajoute de la spécificité. La qualification est similaire, mais vous définissez l'élément auquel le sélecteur s'applique. qualification: ul.classet enchaînement:ul .class

Je ne sais pas ce que vous appelleriez cette technique, mais le comportement est intentionnel et est documenté par le W3C

Les occurrences répétées du même sélecteur simple sont autorisées et augmentent la spécificité.

Que se passe-t-il lorsque la spécificité entre deux règles est identique?

Comme l'a souligné @BoltClock , s'il y a plusieurs déclarations! Importantes, les spécifications dictent que la plus spécifique doit avoir la priorité.

Dans l'exemple ci - dessous, à la fois .fooet .baravoir une spécificité identique, de sorte que le fallsback comportement à la nature en cascade des CSS, dans lequel la dernière règle déclarée dans les revendications CSS priorité à savoir .foo.

HTML

<div>
    <p class="foo bar">foobar</p>
</div>

CSS

.bar {
    color: blue !important;
}
.foo {
    color: red !important;
}

JSFiddle