Ich hasse sie, es trotzt der Kaskadierung von CSS, und wenn Sie sie nicht mit Sorgfalt verwenden, geraten Sie in eine Schleife, in der Sie mehr hinzufügen !important.

Aber ich möchte wissen, ob sie schlecht für die Leistung sind.

BEARBEITEN
Aus den (schnellen) Antworten kann ich schließen, dass dies keinen (signifikanten) Einfluss auf die Leistung hat. Aber es ist schön zu wissen, auch wenn es nur ein zusätzliches Argument ist, um andere zu entmutigen;).

EDIT 2
BoltClock wies darauf hin, dass bei 2 !importantDeklarationen laut Spezifikation die spezifischste ausgewählt wird.

Es sollte eigentlich keinen Einfluss auf die Leistung haben. Wenn ich den CSS-Parser von Firefox bei/source/layout/style/nsCSSDataBlock.cpp#572 sehe, denke ich, dass dies die relevante Routine ist, die das Überschreiben von CSS-Regeln behandelt.

es scheint nur eine einfache Überprüfung auf "wichtig" zu sein.

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

Auch Kommentare bei 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 verwendet einen manuell geschriebenen Top-Down-Parser. In beiden Fällen wird jede CSS-Datei in ein StyleSheet-Objekt analysiert. Jedes Objekt enthält CSS-Regeln.

2. Firefox erstellt dann Stilkontextbäume, die die Endwerte enthalten (nachdem alle Regeln in der richtigen Reihenfolge angewendet wurden).

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

Jetzt können Sie leicht erkennen, dass der Parser beispielsweise mit dem oben beschriebenen Objektmodell die von der betroffenen Regel markieren kann !important leicht und ohne große Folgekosten . Leistungsabfall ist kein gutes Argument dagegen !important.

Die Wartbarkeit ist jedoch ein Hit (wie in anderen Antworten erwähnt), was möglicherweise Ihr einziges Argument gegen sie ist.

Ich denke nicht, dass dies von !importantNatur aus schlecht ist , wenn es darum geht, wie schnell der Browser mit Regeln übereinstimmt (er ist nicht Teil des Selektors, sondern nur Teil der Deklaration).

Wie bereits erwähnt, verringert dies jedoch die Wartbarkeit Ihres Codes und führt daher wahrscheinlich dazu, dass er aufgrund zukünftiger Änderungen unnötig an Größe zunimmt. Die Verwendung von !importantwürde wahrscheinlich auch die Entwicklerleistung verringern.

Wenn Sie wirklich wählerisch waren, können Sie auch sagen, dass !importantIhre CSS-Datei um 11 zusätzliche Bytes erweitert wird. Das ist nicht wirklich viel, aber ich denke, wenn Sie ein paar !importants in Ihrem Stylesheet haben, könnte sich das summieren.

Nur meine Gedanken, leider konnte ich keine Benchmarks finden, wie sich !importantdies auf die Leistung auswirken könnte.

!importanthat seinen Platz. Vertrau mir in diesem Fall. Es hat mich viele Male gerettet und ist oft als kurzfristige Lösung nützlicher, bevor eine längere und elegantere Methode für Ihr Problem gefunden werden kann.

Wie die meisten Dinge wurde es jedoch missbraucht, aber es besteht kein Grund zur Sorge um die Leistung. Ich wette, ein kleines 1x1-GIF hat auf einer Webseite mehr Leistungseinbußen als! Wichtig.

Wenn Sie Ihre Seiten optimieren möchten, gibt es noch viele weitere wichtige Wege;);)

Was hier hinter den Kulissen passiert, ist, dass der Browser während der Verarbeitung Ihres CSS es liest, auf ein !importantAttribut stößt und der Browser zurückkehrt, um die durch definierten Stile anzuwenden !important. Dieser zusätzliche Prozess scheint ein kleiner zusätzlicher Schritt zu sein. Wenn Sie jedoch viele Anfragen bearbeiten, wird die Leistung beeinträchtigt. (Quelle)

Die Verwendung von! Important in Ihrem CSS bedeutet normalerweise, dass Entwickler narzisstisch und egoistisch oder faul sind. Respektiere die kommenden Entwickler ...

Das Denken eines Entwicklers bei der Verwendung von !important:

1. Mein rockiges CSS funktioniert nicht ... grrrr.
2. Was sollte ich jetzt tun??
3. Und dann !importantja ... jetzt funktioniert es gut.

Es ist jedoch kein guter Ansatz, !importantnur weil wir das CSS nicht gut verwaltet haben. Es entstehen viele Designprobleme - die schlimmer sind als Leistungsprobleme -, aber es zwingt uns auch dazu, viele zusätzliche Codezeilen zu verwenden, da wir andere Eigenschaften überschreiben !importantund unser CSS mit nutzlosem Code überfüllt ist. Stattdessen sollten wir zuerst das CSS sehr gut verwalten und nicht zulassen, dass sich die Eigenschaften gegenseitig überschreiben.

Wir können verwenden !important. Aber verwenden Sie es sparsam und nur, wenn es keinen anderen Ausweg gibt.

Ich stimme Ihnen zu, dass Sie es nicht verwenden, da es unabhängig von der Leistung eine schlechte Praxis ist. Allein aus diesen Gründen würde ich es vermeiden, !importantwo immer möglich zu verwenden.

Aber zur Frage der Leistung: Nein, das sollte nicht auffallen. Es könnte eine gewisse Wirkung haben, aber es sollte so klein sein, dass Sie es niemals bemerken oder sich darüber Sorgen machen sollten .

Wenn es wichtig genug ist, um wahrgenommen zu werden, haben Sie wahrscheinlich größere Probleme in Ihrem Code als nur !important. Die einfache Verwendung eines normalen Syntaxelements der von Ihnen verwendeten Kernsprachen wird niemals zu einem Leistungsproblem.

Lassen Sie mich Ihre Frage mit einer Antwort beantworten. Ein Winkel, den Sie wahrscheinlich nicht berücksichtigt haben: Welchen Browser meinen Sie?

Jeder Browser verfügt offensichtlich über eine eigene Rendering-Engine mit eigenen Optimierungen. Nun stellt sich die Frage: Was sind die Auswirkungen auf die Leistung in jedem Browser? Vielleicht !importantin einem Browser schlecht, aber in einem anderen wirklich gut? Und vielleicht ist es in den nächsten Versionen umgekehrt?

Ich denke, mein Punkt hier ist, dass wir als Webentwickler nicht über die Auswirkungen einzelner Syntaxkonstrukte der von uns verwendeten Sprachen auf die Leistung nachdenken sollten (oder darüber nachdenken müssen). Wir sollten diese Syntaxkonstrukte verwenden, weil sie der richtige Weg sind, um das zu erreichen, was wir wollen, und nicht aufgrund ihrer Leistung.

Leistungsfragen sollten in Verbindung mit der Verwendung von Profilern gestellt werden, um zu analysieren, wo sich die Quetschpunkte in Ihrem System befinden. Beheben Sie zuerst die Dinge, die Sie wirklich verlangsamen. Es ist fast sicher, dass Sie weitaus größere Probleme beheben müssen, bevor Sie sich auf die Ebene der einzelnen CSS-Konstrukte beschränken.

Die Leistung wird dadurch nicht merklich beeinträchtigt. Dies verringert jedoch die Wartbarkeit Ihres Codes und kann daher auf lange Sicht die Leistung beeinträchtigen.

Ich musste es benutzen !important ich es schon mehrmals verwenden musste, habe ich persönlich keinen nachweisbaren Leistungseinbruch bei der Verwendung festgestellt.

Beachten Sie als Antwort die Antwort auf diese Stapelfrage aus einem Grund, den Sie möglicherweise verwenden möchten!important .

Ich werde auch etwas erwähnen, das alle anderen nicht erwähnt haben. !importantDies ist die einzige Möglichkeit, Inline-CSS zu überschreiben, ohne eine Javascript-Funktion zu schreiben (was sich auf Ihre Leistung auswirkt, wenn auch nur ein wenig). Sie können also tatsächlich Zeit für die Leistung sparen , wenn Sie Inline-CSS überschreiben müssen.

hmm ...! wichtig oder !! wichtig?

Lassen Sie uns Schritt für Schritt durchgehen:

1. Der Parser muss für jede Eigenschaft prüfen, ob sie wichtig ist, unabhängig davon, ob Sie sie verwenden oder nicht. Der Leistungsunterschied beträgt hier also 0
2. Beim Überschreiben einer Eigenschaft muss der Parser prüfen, ob die zu überschreibende Eigenschaft wichtig ist oder nicht - daher beträgt der Leistungsunterschied hier wieder 0
3. Wenn die zu überschreibende Eigenschaft !! wichtig ist, muss sie die Eigenschaft überschreiben - Leistungseinbruch von -1, wenn! Wichtig nicht verwendet wird
4. Wenn die zu überschreibende Eigenschaft! Wichtig ist, wird das Überschreiben der Eigenschaft übersprungen - Leistungssteigerung von +1 für die Verwendung! Wichtig
5. Wenn die neue Eigenschaft! Wichtig ist, muss die Analyse sie überschreiben, unabhängig davon, ob die zu überschreibende Eigenschaft! Wichtig oder !! wichtig ist - Leistungsunterschied 0 erneut

Ich denke also, wichtig hat tatsächlich eine bessere Leistung, da es dem Parser helfen kann, viele Eigenschaften zu überspringen, die sonst nicht übersprungen werden.

und wie @ryan weiter unten erwähnt, die einzige Möglichkeit, Inline-CSS zu überschreiben und die Verwendung von Javascript zu vermeiden ... also eine andere Möglichkeit, unnötige Leistungseinbußen zu vermeiden

hmm ... stellt sich heraus, dass! wichtig wichtig ist

und auch,

• Die Verwendung von! wichtig spart einem Entwickler viel Zeit
• erspart Ihnen manchmal die Neugestaltung des gesamten CSS
• Manchmal ist HTML oder die übergeordnete CSS-Datei nicht in Ihrer Kontrolle, so dass Sie dort Ihr Leben retten
• verhindert offensichtlich, dass! wichtige Elemente versehentlich von anderen !! wichtigen Elementen überschrieben werden
• und manchmal wählen Browser einfach nicht die richtigen Eigenschaften aus, ohne in Selektoren zu spezifisch zu sein. Daher wird die Verwendung von! wichtig wirklich wichtig und erspart Ihnen das Schreiben von Tonnen spezifischer CSS-Selektoren in Ihr CSS. Selbst wenn Sie mehr Bytes zum Schreiben verwenden, ist es wichtig, dass Sie an anderen Stellen Bytes sparen. und wir alle wissen, dass CSS-Selektoren chaotisch werden können.

Ich denke, die Verwendung von! Important kann Entwickler glücklich machen, und ich denke, das ist sehr wichtig : D.

Ich kann nicht vorhersehen, dass !importantdie Leistung beeinträchtigt wird, jedenfalls nicht von Natur aus. Wenn Ihr CSS jedoch durchsetzt !importantist, bedeutet dies, dass Sie die Auswahl von Qualifizierern überschritten haben und zu spezifisch sind und Ihnen die Eltern oder Qualifizierer ausgehen, um die Spezifität zu erhöhen. Folglich wird haben Ihre CSS aufgebläht werden (was wird die Leistung beeinträchtigen) und schwierig zu warten.

Wenn Sie effizientes CSS schreiben möchten, möchten Sie nur so spezifisch sein, wie Sie müssen, und modulares CSS schreiben . Es wird empfohlen, keine IDs (mit Hashes), Verkettungsselektoren oder qualifizierenden Selektoren zu verwenden.

#In CSS vorangestellte IDs sind bösartig spezifisch, bis zu dem Punkt, an dem 255 Klassen eine ID nicht überschreiben (Geige von: @Faust ). IDs haben jedoch auch ein tieferes Routing-Problem. Sie müssen eindeutig sein. Dies bedeutet, dass Sie sie nicht für doppelte Stile wiederverwenden können, sodass Sie am Ende lineares CSS mit sich wiederholenden Stilen schreiben. Die Auswirkungen davon variieren von Projekt zu Projekt, je nach Umfang, aber die Wartbarkeit leidet immens und in Randfällen auch die Leistung.

Wie können Sie Spezifität ohne !importantVerkettung, Qualifizierung oder IDs hinzufügen (nämlich #) ?

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

Okay, wie funktioniert das?

Das erste und das zweite Beispiel funktionieren gleich, das erste ist buchstäblich eine Klasse und das zweite ist der Attributselektor. Klassen- und Attributselektoren haben die gleiche Spezifität. .eg1/2-barerbt seine Farbe nicht von.eg1/2-foo weil es eine eigene Regel hat.

Das dritte Beispiel sieht aus wie das Qualifizieren oder Verketten von Selektoren, ist es aber auch nicht. Verkettung ist, wenn Sie Selektoren Eltern, Vorfahren usw. voranstellen. Dies erhöht die Spezifität. Das Qualifying ist ähnlich, aber Sie definieren das Element, auf das der Selektor angewendet wird. Qualifikation: ul.classund Verkettung:ul .class

Ich bin nicht sicher, wie Sie diese Technik nennen würden, aber das Verhalten ist beabsichtigt und wird von W3C dokumentiert

Wiederholte Vorkommen desselben einfachen Selektors sind zulässig und erhöhen die Spezifität.

Was passiert, wenn die Spezifität zwischen zwei Regeln identisch ist?

Wie @BoltClock hervorhob : Wenn es mehrere! Wichtige Deklarationen gibt, schreibt die Spezifikation vor, dass die spezifischste Vorrang haben sollte.

Im folgenden Beispiel haben beide .foound .bardie gleiche Spezifität, sodass das Verhalten auf die Kaskadierung von CSS zurückgreift, wobei die letzte in CSS deklarierte Regel Vorrang hat, d .foo. H.

HTML

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

CSS

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

JSFiddle