Los odio, desafía la naturaleza en cascada de CSS, y si no los usa con cuidado, terminará en un ciclo de agregar más !important.

Pero quiero saber si son malos para el rendimiento.

EDITAR
De las respuestas (rápidas) puedo concluir que no tendrá un impacto (significativo) en el rendimiento. Pero es bueno saberlo, incluso si es solo un argumento adicional para desanimar a otros;).

EDIT 2
BoltClock señaló que si hay 2 !importantdeclaraciones, las especificaciones dicen que elegirá la más específica.

Realmente no debería tener ningún efecto sobre el rendimiento. Al ver el analizador CSS de firefox/source/layout/style/nsCSSDataBlock.cpp#572 y creo que esa es la rutina relevante, manejar la sobrescritura de las reglas CSS.

solo parece ser una simple verificación de "importante".

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

También, comentarios en 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 usa un analizador de arriba hacia abajo escrito manualmente. En ambos casos, cada archivo CSS se analiza en un objeto StyleSheet, cada objeto contiene reglas CSS.

2. Firefox luego crea árboles de contexto de estilo que contienen los valores finales (después de aplicar todas las reglas en el orden correcto)

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

Ahora, puede ver fácilmente, como en el caso del Modelo de Objetos descrito anteriormente, el analizador puede marcar las reglas afectadas !importantfácilmente, sin mucho costo posterior. La degradación del rendimiento no es un buen argumento en contra !important.

Sin embargo, la capacidad de mantenimiento se ve afectada (como se mencionó en otras respuestas), que podría ser su único argumento en contra de ellos.

No creo que eso !importantsea ​​inherentemente malo en términos de la rapidez con la que el navegador coincide con las reglas (no forma parte del selector, solo parte de la declaración)

Sin embargo, como ya se ha indicado, reducirá la capacidad de mantenimiento de su código y, por lo tanto, es probable que aumente innecesariamente su tamaño debido a cambios futuros. El uso de !importantprobablemente también reduciría el rendimiento del desarrollador.

Si fueras muy quisquilloso, también podrías decir que !importantagrega 11 bytes adicionales a tu archivo CSS, esto no es mucho, pero supongo que si tienes algunos pocos !importanten tu hoja de estilo, podría sumar.

Solo mis pensamientos, desafortunadamente no pude encontrar ningún punto de referencia sobre cómo !importantpodría afectar el rendimiento.

!importanttiene su lugar Confía en mí en eso. Me ha salvado muchas veces y, a menudo, es más útil como solución a corto plazo, antes de encontrar un método más largo y elegante para su problema.

Sin embargo, como la mayoría de las cosas, se ha abusado de él, pero no hay necesidad de preocuparse por el "rendimiento". Apuesto a que un pequeño GIF 1x1 tiene más éxito en el rendimiento en una página web de lo que sería importante.

Si desea optimizar sus páginas, hay muchas más rutas importantes que tomar;);)

Lo que sucede aquí detrás de escena es que a medida que se procesa su CSS, el navegador lo lee, encuentra un !importantatributo y el navegador vuelve a aplicar los estilos definidos por !important. Este proceso adicional puede parecer un pequeño paso adicional, pero si está atendiendo muchas solicitudes, tendrá un éxito en el rendimiento. (Fuente)

Usar! Important en tu CSS generalmente significa desarrollador narcisista y egoísta o perezoso. Respeta a los desarrolladores por venir ...

El pensamiento de un desarrollador cuando usa !important:

1. Mi CSS oscilante no funciona ... grrrr.
2. ¿¿Qué debería hacer ahora??
3. Y luego !importantsí ... ahora está funcionando bien.

Sin embargo, no es un buen enfoque para usar !importantsolo porque no manejamos bien el CSS. Crea muchos problemas de diseño, que son peores que los problemas de rendimiento, pero también nos obliga a usar muchas líneas adicionales de código, ya que estamos anulando otras propiedades !importanty nuestro CSS se satura con código inútil. Lo que deberíamos hacer es administrar primero el CSS muy bien y no dejar que las propiedades se anulen entre sí.

Nosotros podemos utilizar !important. Pero úselo con moderación y solo cuando no haya otra salida.

Estoy de acuerdo con usted en no usarlo porque es una mala práctica, independientemente del rendimiento. Solo por esos motivos, evitaría usar !importantsiempre que sea posible.

Pero sobre la cuestión del rendimiento: No, no debería ser notable. Puede tener algún efecto, pero debería ser tan pequeño que nunca debería notarlo, ni debería preocuparse por ello.

Si es lo suficientemente significativo como para ser notable, entonces es probable que tenga problemas más grandes en su código que simplemente !important. El uso simple de un elemento de sintaxis normal de los idiomas principales que está utilizando nunca será un problema de rendimiento.

Déjame responder a tu pregunta con una pregunta retórica a cambio; un ángulo que probablemente no consideró: ¿a qué navegador se refiere?

Cada navegador obviamente tiene su propio motor de renderizado, con sus propias optimizaciones. Entonces la pregunta ahora es: ¿cuáles son las implicaciones de rendimiento en cada navegador? ¿Quizás se !importantdesempeña mal en un navegador pero realmente bien en otro? Y tal vez en las próximas versiones, ¿será al revés?

Creo que mi punto aquí es que nosotros, como desarrolladores web, no deberíamos pensar (o tener que pensar) en las implicaciones de rendimiento de las construcciones de sintaxis individuales de los lenguajes que estamos usando. Deberíamos usar esas construcciones de sintaxis porque son la forma correcta de lograr lo que queremos no debido a cómo funcionan.

Las preguntas de rendimiento deben formularse junto con el uso de perfiladores para analizar dónde están los puntos críticos en su sistema. Primero arregla las cosas que realmente te están frenando. Es casi seguro que habrá problemas mucho más grandes para que corrija antes de bajar al nivel de construcciones CSS individuales.

No afecta notablemente el rendimiento. Sin embargo, reduce la capacidad de mantenimiento de su código y, por lo tanto, es probable que disminuya el rendimiento a largo plazo.

Habiendo tenido que usarlo !importantvarias veces antes, personalmente no he notado ningún impacto demostrable en el rendimiento al usarlo.

Como nota, vea la respuesta a esta pregunta de la pila por una razón que tal vez quiera usar !important.

También mencionaré algo que todos los demás no han mencionado. !importantes la única forma de anular css en línea antes de escribir una función de JavaScript (que afectará su rendimiento aunque sea solo un poco). Por lo tanto, podría ahorrarle algo de tiempo de rendimiento si necesita anular css en línea.

hmm ... importante o importante?

Veamos este paso a paso:

1. El analizador debe verificar si es importante para cada propiedad, independientemente de si la usa o no, por lo que la diferencia de rendimiento aquí es 0
2. Al sobrescribir una propiedad, el analizador tiene que verificar si la propiedad que se sobrescribe es importante o no, por lo que la diferencia de rendimiento aquí es 0 nuevamente
3. Si la propiedad que se sobrescribe es !! importante, tiene que sobrescribir la propiedad: ¡un rendimiento de -1 para no usar! Important
4. Si la propiedad que se sobrescribe es importante, omite sobrescribir la propiedad, ¡un aumento de rendimiento de +1 por usar! Importante
5. Si la nueva propiedad es! Importante, el análisis tiene que sobrescribirla, independientemente de que la propiedad que se sobrescribe sea! Importante o !! importante - diferencia de rendimiento 0 nuevamente

Así que supongo que importante realmente tiene un mejor rendimiento, ya que puede ayudar al analizador a omitir muchas propiedades que de otro modo no omitirá.

y como @ryan menciona a continuación, la única forma de anular css en línea y evitar el uso de JavaScript ... así que otra forma de evitar un golpe de rendimiento innecesario

hmm ... resulta que importante es importante

y también,

• usando! importante ahorra mucho tiempo para un desarrollador
• a veces te salva de rediseñar todo el CSS
• a veces html o el archivo CSS principal no está bajo tu control, por lo que te salva la vida allí
• ¡obviamente evita que otros elementos importantes sobrescriban accidentalmente elementos importantes!
• y, a veces, los navegadores simplemente no eligen las propiedades correctas, sin ser demasiado específicos en los selectores, por lo que usar! important realmente se vuelve importante y le ahorra escribir toneladas de selectores CSS específicos en su CSS. así que supongo que incluso si usa más bytes para escribir! importante, podría ahorrarle bytes en otros lugares. y todos sabemos, los selectores de CSS pueden ser desordenados.

Así que supongo que usar! Important puede hacer felices a los desarrolladores, y creo que eso es muy importante : D

No puedo prever !importantobstaculizar el rendimiento, no inherentemente de todos modos. Sin embargo, si su CSS está plagado !important, eso indica que ha superado los selectores de calificación y que es demasiado específico y se ha quedado sin padres o calificadores para agregar especificidad. En consecuencia, su CSS se habrá hinchado (lo que impedirá el rendimiento) y será difícil de mantener.

Si desea escribir CSS eficiente, entonces debe ser tan específico como sea necesario y escribir CSS modular . Es recomendable abstenerse de usar ID (con hashes), encadenando selectores o selectores calificados.

Los ID con prefijo #CSS son viciosamente específicos, hasta el punto de que 255 clases no anularán un id (violín por: @Faust ). Sin embargo, los ID también tienen un problema de enrutamiento más profundo, tienen que ser únicos, esto significa que no puede reutilizarlos para estilos duplicados, por lo que termina escribiendo CSS lineal con estilos repetitivos. La repercusión de hacer esto variará de proyecto a proyecto, dependiendo de la escala, pero la capacidad de mantenimiento sufrirá inmensamente y, en casos extremos, también el rendimiento.

¿Cómo puede agregar especificidad sin !importantencadenar, calificar o ID (es decir #)

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

Bien, entonces, ¿cómo funciona eso?

El primer y el segundo ejemplo funcionan igual, el primero es literalmente una clase y el segundo es el selector de atributos. Las clases y los selectores de atributos tienen una especificidad idéntica. .eg1/2-barno hereda su color .eg1/2-fooporque tiene su propia regla.

El tercer ejemplo parece calificar o encadenar selectores, pero no lo es. El encadenamiento es cuando prefijas selectores con padres, antepasados, etc. Esto agrega especificidad. La calificación es similar, pero usted define el elemento al que se aplica el selector. calificación: ul.classy encadenamiento:ul .class

No estoy seguro de cómo llamarías a esta técnica, pero el comportamiento es intencional y está documentado por W3C

Se permiten repeticiones del mismo selector simple y aumentan la especificidad.

¿Qué sucede cuando la especificidad entre dos reglas es idéntica?

Como señaló @BoltClock , si hay varias declaraciones importantes, la especificación dicta que la más específica debe tener prioridad.

En el siguiente ejemplo, tanto .fooy .bartienen idéntica especificidad, por lo que el comportamiento fallsback a la naturaleza en cascada de CSS, por lo que la última regla declarado en las solicitudes de CSS de precedencia es decir .foo.

HTML

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

CSS

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

JSFiddle