Li odio, sfida la natura a cascata dei CSS, e se non li usi con cura finisci in un ciclo di aggiunta di più !important.

Ma voglio sapere se fanno male alle prestazioni?

EDIT
Dalle risposte (veloci) posso concludere che non avrà un impatto (significativo) sulle prestazioni. Ma è bello sapere, anche se è solo un argomento in più per scoraggiare gli altri;).

EDIT 2
BoltClock ha sottolineato che se ci sono 2 !importantdichiarazioni le specifiche dicono che sceglierà quella più specifica.

Non dovrebbe avere alcun effetto sulla performance davvero. Vedere il parser CSS di firefox su/source/layout/style/nsCSSDataBlock.cpp#572 e penso che sia la routine pertinente, gestire la sovrascrittura delle regole CSS.

sembra solo un semplice controllo per "importante".

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

Inoltre, commenti a 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 utilizza un parser top down scritto manualmente. In entrambi i casi, ciascun file CSS viene analizzato in un oggetto StyleSheet, ogni oggetto contiene regole CSS.

2. Firefox quindi crea alberi di contesto di stile che contengono i valori finali (dopo aver applicato tutte le regole nel giusto ordine)

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

Ora, puoi facilmente vedere, come nel caso del modello a oggetti descritto sopra, il parser può contrassegnare !importantfacilmente le regole interessate dalla , senza molti costi successivi. Il degrado delle prestazioni non è un buon argomento contro !important.

Tuttavia, la manutenibilità subisce un colpo (come menzionato da altre risposte), che potrebbe essere il tuo unico argomento contro di loro.

Non penso che !importantsia intrinsecamente negativo in termini di velocità con cui il browser soddisfa le regole (non fa parte del selettore, solo parte della dichiarazione)

Tuttavia, come è già stato affermato, ridurrà la manutenibilità del codice e quindi probabilmente aumenterà inutilmente le dimensioni a causa di future modifiche. L'uso di !importantprobabilmente ridurrebbe anche le prestazioni degli sviluppatori.

Se tu fossi davvero esigente, potresti anche dire che !importantaggiunge 11 byte extra al tuo file CSS, questo non è molto, ma immagino che se hai qualche !importants nel tuo foglio di stile potrebbe aggiungere.

Solo i miei pensieri, purtroppo non sono riuscito a trovare parametri di riferimento su come !importantpotrebbe influire sulle prestazioni.

!importantha il suo posto. Fidati di me su quello. Mi ha salvato molte volte ed è spesso più utile come soluzione a breve termine, prima di trovare un metodo più lungo ed elegante per il tuo problema.

Tuttavia, come la maggior parte delle cose, è stato abusato, ma non è necessario preoccuparsi di "prestazioni". Scommetto che una piccola GIF 1x1 ha un maggior successo in una pagina web di quanto!

Se vuoi ottimizzare le tue pagine, ci sono molti altri ! Percorsi importanti da percorrere;);)

Quello che succede qui dietro le quinte è che mentre il tuo CSS viene elaborato, il browser lo legge, incontra un !importantattributo e il browser torna indietro per applicare gli stili definiti da !important. Questo processo aggiuntivo potrebbe sembrare un piccolo passo aggiuntivo, ma se stai soddisfacendo molte richieste, otterrai un successo nelle prestazioni. (Fonte)

L'uso di! Important nel tuo CSS di solito significa sviluppatore narcisista ed egoista o pigro. Rispetta gli sviluppatori che verranno ...

Il pensiero di uno sviluppatore quando utilizza !important:

1. Il mio dondolo CSS non funziona ... grrrr.
2. Cosa dovrei fare ora??
3. E poi !importantsì .... ora funziona bene.

Tuttavia, non è un buon approccio da usare !importantsolo perché non abbiamo gestito bene il CSS. Crea molti problemi di progettazione - che sono peggiori dei problemi di prestazioni - ma ci costringe anche a usare molte righe di codice in più poiché stiamo sovrascrivendo altre proprietà !importante il nostro CSS diventa ingombro di codice inutile. Quello che dovremmo fare invece è prima di tutto gestire molto bene il CSS e non lasciare che le proprietà si sovrascrivano a vicenda.

Siamo in grado di utilizzare !important. Ma usalo con parsimonia e solo quando non c'è altra via d'uscita.

Sono d'accordo con te sul non usarlo perché è una cattiva pratica, indipendentemente dalle prestazioni. Solo per questi motivi, eviterei di usarlo !importantove possibile.

Ma per quanto riguarda la performance: No, non dovrebbe essere evidente. Potrebbe avere qualche effetto, ma dovrebbe essere così piccolo che non dovresti mai notarlo, né dovresti preoccupartene.

Se è abbastanza significativo da essere evidente, probabilmente hai problemi più grandi nel tuo codice che non solo !important. L'uso semplice di un normale elemento di sintassi delle lingue principali che stai usando non sarà mai un problema di prestazioni.

Lasciami rispondere alla tua domanda con una domanda retorica in cambio; un'angolazione che probabilmente non hai considerato: quale browser intendi?

Ogni browser ha ovviamente il suo motore di rendering, con le sue ottimizzazioni. Quindi la domanda ora diventa: quali sono le implicazioni sulle prestazioni in ciascun browser? Forse !importantfunziona male in un browser ma davvero bene in un altro? E forse nelle prossime versioni, sarà il contrario?

Immagino che il mio punto qui sia che noi come sviluppatori web non dovremmo pensare (o dover pensare) alle implicazioni sulle prestazioni dei singoli costrutti di sintassi dei linguaggi che stiamo usando. Dovremmo usare quei costrutti di sintassi perché sono il modo giusto per ottenere ciò che non vogliamo fare a causa di come si comportano.

Le domande relative alle prestazioni dovrebbero essere poste insieme all'uso di profilatori per analizzare dove si trovano i punti di presa nel sistema. Risolvi le cose che ti stanno veramente rallentando prima. Ci sono quasi sicuramente dei problemi molto più grandi da risolvere prima di scendere al livello dei singoli costrutti CSS.

Non influisce in modo evidente sulle prestazioni. Riduce tuttavia la manutenibilità del codice e pertanto è probabile che a lungo termine riduca le prestazioni.

Avendo dovuto utilizzarlo !importantpiù volte in precedenza, non ho notato personalmente alcun impatto sulle prestazioni dimostrabile durante l'utilizzo.

Come nota, vedi la risposta a questa domanda dello stack per un motivo che potresti voler usare !important.

Inoltre menzionerò qualcosa che tutti gli altri non hanno menzionato. !importantè l'unico modo per sovrascrivere i CSS incorporati prima di scrivere una funzione javascript (che influenzerà le tue prestazioni anche se solo un po '). Quindi potrebbe effettivamente farti risparmiare un po 'di tempo se devi sovrascrivere i CSS in linea.

hmm ...! importante o !! importante?

Esaminiamo questo passo per passo:

1. Il parser deve controllare! Importante per ogni proprietà, indipendentemente dal fatto che la usi o meno - quindi la differenza di prestazioni qui è 0
2. Quando si sovrascrive una proprietà, il parser deve verificare se la proprietà da sovrascrivere è importante o no, quindi la differenza di prestazioni è di nuovo pari a 0
3. Se la proprietà da sovrascrivere è !! importante, deve sovrascrivere la proprietà - hit delle prestazioni di -1 per non usare!
4. Se la proprietà da sovrascrivere è! Importante, salta la sovrascrittura della proprietà - aumento delle prestazioni di +1 per l'uso! Importante
5. Se la nuova proprietà è! Importante, l'analisi deve sovrascriverla indipendentemente dalla proprietà da sovrascrivere è! Importante o !! importante - differenza di prestazioni 0 di nuovo

Quindi suppongo che important abbia prestazioni migliori in quanto può aiutare il parser a saltare molte proprietà che altrimenti non salterà.

e come menziona @ryan di seguito, l'unico modo per sovrascrivere i CSS incorporati ed evitare di usare javascript ... quindi un altro modo per evitare un inutile hit delle prestazioni

hmm ... si scopre che! importante è importante

e anche,

• usando! important si risparmia molto tempo per uno sviluppatore
• a volte ti salva dal ridisegnare l'intero CSS
• a volte html o il file css padre non è sotto il tuo controllo, quindi ti salva la vita lì
• ovviamente impedisce! importanti elementi di essere sovrascritti accidentalmente da altri !! elementi importanti
• e a volte i browser semplicemente non scelgono le proprietà giuste, senza essere troppo specifici nei selettori, quindi l'uso di! important diventa davvero importante e ti salva dalla scrittura di tonnellate di selettori CSS specifici nei tuoi CSS. quindi immagino che anche se usi più byte per scrivere! importante, potrebbe salvarti byte in altri posti. e lo sappiamo tutti, i selettori CSS possono diventare disordinati.

Quindi immagino che usare! Important possa rendere felici gli sviluppatori e penso che sia molto importante : D

Non posso prevedere di !importantostacolare le prestazioni, non intrinsecamente comunque. Se, tuttavia, il tuo CSS è pieno di indovinelli !important, ciò indica che hai superato i selettori qualificati e che sei troppo specifico e sei a corto di genitori o qualificatori per aggiungere specificità. Di conseguenza, il CSS sarà diventato gonfio (che si ostacolano le prestazioni) e difficile da mantenere.

Se si desidera scrivere CSS efficienti, si desidera essere specifici solo quanto è necessario e scrivere CSS modulari . È consigliabile astenersi dall'utilizzare ID (con hash), concatenare selettori o selettori qualificati.

Gli ID con prefisso #CSS sono viziosamente specifici, al punto che 255 classi non sovrascriveranno un id (violino di: @Faust ). Gli ID hanno anche un problema di routing più profondo, devono essere unici, questo significa che non puoi riutilizzarli per stili duplicati, quindi finisci per scrivere CSS lineari con stili ripetuti. La ripercussione di ciò varierà da progetto a progetto, a seconda della scala, ma la manutenibilità ne risentirà immensamente e, in casi limite, anche le prestazioni.

Come puoi aggiungere specificità senza !important, concatenare, qualificarsi o ID (vale a dire #)

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, allora come funziona?

Il primo e il secondo esempio funzionano allo stesso modo, il primo è letteralmente una classe e il secondo è il selettore di attributi. I selettori di classi e attributi hanno identica specificità. .eg1/2-barnon eredita il suo colore .eg1/2-fooperché ha una sua regola.

Il terzo esempio sembra selettori qualificanti o concatenati, ma non è nessuno dei due. Il concatenamento avviene quando si prefiggono i selettori con genitori, antenati e così via; questo aggiunge specificità. La qualificazione è simile, ma si definisce l'elemento a cui si applica il selettore. qualificazione: ul.classe concatenamento:ul .class

Non sono sicuro di come chiameresti questa tecnica, ma il comportamento è intenzionale ed è documentato dal W3C

Sono consentite ricorrenze ripetute dello stesso selettore semplice che aumentano la specificità.

Cosa succede quando la specificità tra due regole è identica?

Come ha sottolineato @BoltClock , se ci sono più dichiarazioni importanti, allora specifica che quella più specifica dovrebbe avere la precedenza.

Nell'esempio che segue, entrambi .fooe .barhanno identica specificità, quindi il comportamento ricade sulla natura a cascata del CSS, per cui l'ultima regola dichiarata nel CSS rivendica la precedenza cioè .foo.

HTML

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

CSS

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

JSFiddle