Eu os odeio, isso desafia a natureza em cascata do CSS e, se você não usá-los com cuidado, acaba adicionando mais !important.

Mas eu quero saber se eles são ruins para o desempenho?

EDITAR
A partir das respostas (rápidas), posso concluir que não terá um impacto (significativo) no desempenho. Mas é bom saber, mesmo que seja apenas um argumento extra para desencorajar os outros;).

EDIT 2
BoltClock apontou que, se houver 2 !importantdeclarações, as especificações dizem que escolherá a mais específica.

Realmente não deve ter nenhum efeito sobre o desempenho. Vendo o analisador de CSS do firefox/source/layout/style/nsCSSDataBlock.cpp#572 e acho que é a rotina relevante, lidando com a substituição de regras de CSS.

apenas parece ser uma verificação simples para "importante".

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

Além disso, comentários em 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. O Firefox usa um analisador de cima para baixo escrito manualmente. Nos dois casos, cada arquivo CSS é analisado em um objeto StyleSheet, cada objeto contém regras CSS.

2. O Firefox cria árvores de contexto de estilo que contêm os valores finais (depois de aplicar todas as regras na ordem correta)

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

Agora, você pode ver facilmente, como no Modelo de Objeto descrito acima, o analisador pode marcar as regras afetadas !importantfacilmente, sem muito custo subsequente. A degradação do desempenho não é um bom argumento contra !important.

No entanto, a manutenção é afetada (como outras respostas mencionadas), que pode ser seu único argumento contra elas.

Eu não acho que isso !importantseja inerentemente ruim em termos da rapidez com que o navegador corresponde às regras (ele não faz parte do seletor, apenas parte da declaração)

No entanto, como já foi afirmado, ele reduzirá a capacidade de manutenção do seu código e, portanto, provavelmente fará com que ele cresça desnecessariamente em tamanho devido a alterações futuras. O uso de !importantprovavelmente também reduziria o desempenho do desenvolvedor.

Se você estava sendo muito exigente, também poderia dizer que !importantadiciona 11 bytes extras ao seu arquivo CSS, isso não é muito, mas acho que se você tiver alguns poucos !importants na sua folha de estilo, isso poderá somar.

Apenas meus pensamentos, infelizmente não consegui encontrar nenhum parâmetro de referência sobre como !importantpoderia afetar o desempenho.

!importanttem o seu lugar. Confie em mim nessa. Ele me salvou muitas vezes e geralmente é mais útil como uma solução de curto prazo, antes que um método mais longo e elegante para o seu problema possa ser encontrado.

No entanto, como a maioria das coisas, foi abusado, mas não há necessidade de se preocupar com 'desempenho'. Aposto que um pequeno GIF 1x1 tem mais impacto sobre o desempenho em uma página da Web do que! Important.

Se você deseja otimizar suas páginas, existem muitas outras rotas importantes a serem seguidas;);)

O que está acontecendo aqui nos bastidores é que, conforme o CSS está sendo processado, o navegador o lê, encontra um !importantatributo e o navegador volta a aplicar os estilos definidos por !important. Esse processo extra pode parecer uma pequena etapa adicional, mas se você estiver atendendo a muitas solicitações, sofrerá um impacto no desempenho. (Fonte)

Usar! Important em seu CSS geralmente significa desenvolvedor narcisista, egoísta ou preguiçoso. Respeite os desenvolvedores por vir ...

O pensamento de um desenvolvedor ao usar !important:

1. Meu CSS de balanço não está funcionando ... grrrr.
2. O que eu deveria fazer agora??
3. E então !importantsim ... agora está funcionando bem.

No entanto, não é uma boa abordagem a ser usada !importantapenas porque não gerenciamos bem o CSS. Ele cria muitos problemas de design - que são piores que os problemas de desempenho - mas também nos obriga a usar muitas linhas de código extras, já que estamos substituindo outras propriedades !importante nosso CSS fica cheio de código inútil. Em vez disso, o que devemos fazer é gerenciar muito bem o CSS e não deixar que as propriedades se sobreponham.

Nós podemos usar !important. Mas use-o com moderação e somente quando não houver outra saída.

Concordo com você em não usá-lo porque é uma prática ruim, independentemente do desempenho. Por esse motivo, eu evitaria usá-lo !importantsempre que possível.

Mas sobre a questão do desempenho: não, não deve ser perceptível. Pode ter algum efeito, mas deve ser tão pequeno que você nunca deve perceber, nem se preocupar com isso.

Se for significativo o suficiente para ser perceptível, é provável que você tenha problemas maiores no seu código do que apenas !important. O uso simples de um elemento de sintaxe normal dos idiomas principais que você está usando nunca será um problema de desempenho.

Deixe-me responder sua pergunta com uma pergunta retórica em troca; um ângulo que você provavelmente não considerou: qual navegador você quer dizer?

Cada navegador obviamente possui seu próprio mecanismo de renderização, com suas próprias otimizações. Então a pergunta agora é: quais são as implicações de desempenho em cada navegador? Talvez tenha um !importantdesempenho ruim em um navegador, mas muito bem em outro? E talvez nas próximas versões, seja o contrário?

Acho que meu argumento aqui é que nós, como desenvolvedores da Web, não devemos pensar (ou precisar) sobre as implicações de desempenho das construções de sintaxe individuais das linguagens que estamos usando. Devemos usar essas construções de sintaxe, porque elas são o caminho certo para alcançar o que queremos fazer, devido ao desempenho delas.

Perguntas sobre desempenho devem ser feitas em conjunto com o uso de criadores de perfil para analisar onde estão os pontos de aperto no seu sistema. Corrija as coisas que realmente estão atrasando você primeiro. É quase certo que existem problemas muito maiores para você corrigir antes de chegar ao nível de construções CSS individuais.

Não afeta visivelmente o desempenho. No entanto, reduz a capacidade de manutenção do seu código e, portanto, é provável que prejudique o desempenho a longo prazo.

Tendo tido que usar !importantvárias vezes antes, eu pessoalmente não notei nenhum desempenho demonstrável ao usá-lo.

Como uma observação, veja a resposta para esta pergunta da pilha por um motivo que você pode querer usar !important.

Também vou mencionar algo que todo mundo não mencionou. !importanté a única maneira de substituir o CSS embutido antes de escrever uma função javascript (que afetará seu desempenho, mesmo que apenas um pouco). Portanto, isso pode poupar algum tempo de desempenho se você precisar substituir o CSS embutido.

hmm ...! importante ou !! importante?

Vamos seguir este passo a passo:

1. O Analisador deve verificar! Importante para cada propriedade, independentemente de você usá-lo ou não - então a diferença de desempenho aqui é 0
2. Ao substituir uma propriedade, o analisador precisa verificar se a propriedade que está sendo substituída é importante ou não - portanto, a diferença de desempenho aqui é 0 novamente
3. Se a propriedade que está sendo sobrescrita for !! importante, ela deve sobrescrever a propriedade - desempenho atingido de -1 por não usar! Important
4. Se a propriedade que está sendo substituída for! Important, ela ignora a propriedade - aumento de desempenho de +1 ao usar! Important
5. Se a nova propriedade é! Importante, a análise deve substituí-la, independentemente da propriedade que está sendo sobrescrita é! Importante ou !! importante - diferença de desempenho 0 novamente

Então, acho que important é realmente melhor desempenho, pois pode ajudar o analisador a ignorar muitas propriedades que, caso contrário, não serão ignoradas.

e, como @ryan menciona abaixo, a única maneira de substituir o CSS embutido e evitar o uso de javascript ... outra maneira de evitar um desempenho desnecessário

hmm ... acontece que importante é importante

e também,

• using! important economiza muito tempo para um desenvolvedor
• às vezes evita que você redesenhe todo o CSS
• às vezes, o html ou o arquivo css principal não está sob seu controle; portanto, ele salva sua vida
• obviamente evita que elementos importantes sejam acidentalmente substituídos por outros !! elementos importantes
• e, às vezes, os navegadores simplesmente não escolhem as propriedades corretas, sem serem muito específicos nos seletores; portanto, usar! important realmente se torna importante e evita que você escreva toneladas de seletores de CSS específicos em seu CSS. então eu acho que mesmo se você usar mais bytes para escrever! importante, ele poderá economizar bytes em outros lugares. e todos sabemos, os seletores de CSS podem ficar confusos.

Então, acho que usar! Important pode fazer os desenvolvedores felizes, e acho isso muito importante : D

Não posso prever !importantimpedimentos de desempenho, de forma alguma inerentemente. Se, no entanto, seu CSS estiver cheio !important, isso indica que você superou os seletores de qualificação e é muito específico e ficou sem pais ou qualificadores para adicionar especificidade. Consequentemente, o seu CSS terá tornar-se inchado (que irá impedir o desempenho) e difícil de manter.

Se você quer escrever CSS eficiente, então você quer ser única tão específico quanto você precisa ser e escrever CSS modular . É aconselhável abster-se de usar IDs (com hashes), seletores de encadeamento ou seletores qualificados.

Os IDs prefixados #no CSS são violentamente específicos, a ponto de 255 classes não substituirem um ID ( violar por: @Faust ). Os IDs também têm um problema roteado mais profundo, eles precisam ser únicos, o que significa que você não pode reutilizá-los para estilos duplicados; portanto, você acaba escrevendo CSS linear com estilos repetidos. A repercussão de fazer isso varia de projeto para projeto, dependendo da escala, mas a manutenção sofrerá imensamente e, em casos extremos, o desempenho também.

Como você pode adicionar especificidade sem !important, encadeamento, qualificação ou IDs (a saber #)

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

Ok, então como isso funciona?

O primeiro e o segundo exemplos funcionam da mesma forma, o primeiro é literalmente uma classe e o segundo é o seletor de atributos. Os seletores de Classes e Atributos têm especificidade idêntica. .eg1/2-barnão herda sua cor .eg1/2-fooporque tem sua própria regra.

O terceiro exemplo parece com seletores de qualificação ou encadeamento, mas não é. O encadeamento é quando você prefixa os seletores com os pais, ancestrais e assim por diante; isso adiciona especificidade. A qualificação é semelhante, mas você define o elemento ao qual o seletor está se aplicando. qualificação: ul.classe encadeamento:ul .class

Não sei ao certo como você chamaria essa técnica, mas o comportamento é intencional e está documentado pelo W3C

Ocorrências repetidas do mesmo seletor simples são permitidas e aumentam a especificidade.

O que acontece quando a especificidade entre duas regras é idêntica?

Como o @BoltClock apontou , se houver várias declarações importantes, a especificação determina que a mais específica deve ter precedência.

No exemplo abaixo, ambos .fooe .bartêm especificidade idêntica, portanto, o comportamento recai na natureza em cascata do CSS, pelo qual a última regra declarada no CSS reivindica precedência .foo.

HTML

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

CSS

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

JSFiddle