Es! Importante malo para el rendimiento?

Los odio, desafía la naturaleza en cascada de CSS, y si no los utilizas con cuidado terminas 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 extra para desalentar a los demás;).

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

No debería tener ningún efecto sobre el rendimiento realmente. Ver el analizador de CSS de /source/layout/style/nsCSSDataBlock.cpp#572 en /source/layout/style/nsCSSDataBlock.cpp#572 y creo que esa es la rutina relevante, manejando la sobreescritura de las reglas de CSS.

simplemente parece ser un simple control de “importante”.

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

Además, los 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 crea árboles de contexto de estilo que contienen los valores finales (después de aplicar todas las reglas en el orden correcto)

CSS Parser Firefox

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 por !important fácilmente, sin un gran costo posterior. La degradación del rendimiento no es un buen argumento en contra de !important .

Sin embargo, el mantenimiento tiene un impacto (como otras respuestas mencionadas), que podría ser su único argumento en contra de ellos.

No creo que eso !important Es inherentemente malo en términos de cuán rápido el navegador coincide con las reglas (no forma parte del selector, solo parte de la statement)

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

Si fueras muy quisquilloso, ¡también podrías decir que !important agrega 11 bytes adicionales a tu archivo CSS, esto no es mucho, pero supongo que si tienes unos pocos !important en tu hoja de estilos podría sumr.

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

!important tiene su lugar. Confía en mí en eso. Me ha ahorrado 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 más elegante para su problema.

Sin embargo, como la mayoría de las cosas, ha sido abusado, pero no hay necesidad de preocuparse por el “rendimiento”. Apuesto a que un pequeño GIF 1×1 tiene más de un golpe de rendimiento en una página web que! Importante.

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

Buena lectura: ¡CSS! Referencia completa importante

Lo que ocurre aquí detrás de escena es que a medida que se procesa su CSS, el navegador lo lee, encuentra un atributo !important 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 impacto en el rendimiento. (Fuente)

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

¡El pensamiento de un desarrollador al usar !important :

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

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

Podemos usar !important . Pero úselo con moderación y solo cuando no haya otra salida.

enter image description here

Estoy de acuerdo con que no lo uses porque es una mala práctica, independientemente del rendimiento. Solo por ese motivo, evitaría usar !important siempre 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ías notarlo, ni deberías preocuparte por ello.

Si es lo suficientemente significativo como para ser notorio, es probable que tengas problemas más grandes en tu código que simplemente !important . El uso simple de un elemento de syntax normal de los idiomas centrales que está utilizando nunca va a ser un problema de rendimiento.

Déjame responder tu pregunta con una pregunta retorica a cambio; un ángulo que probablemente no consideraste: ¿a qué navegador te refieres?

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? Tal vez !important funciona 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 debemos pensar (o debemos pensar) en las implicaciones de rendimiento de las construcciones de syntax individuales de los lenguajes que estamos utilizando. Deberíamos usar esos constructos de syntax porque son la forma correcta de lograr lo que queremos hacer, no por la forma en que funcionan.

Las preguntas de rendimiento deben formularse junto con el uso de profilers para analizar dónde están los pellizcos en su sistema. Arregla las cosas que realmente te están ralentizando primero. Es casi seguro que habrá problemas mucho más grandes que solucionar antes de llegar al nivel de construcciones de 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.

Después de haber tenido que usar !important varias veces antes, personalmente he notado que no se logró un rendimiento demostrable al usarlo.

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

También mencionaré algo que los demás no mencionaron. !important es la única manera de anular el css en línea, salvo la escritura de una función de JavaScript (que afectará su rendimiento aunque sea solo un poco). Por lo tanto, podría ahorrarle tiempo de rendimiento si necesita anular el css en línea.

hmm …! importante o importante?

Repasemos este paso por paso:

  1. El Analizador tiene que verificar la importancia de cada propiedad, independientemente de si la usa o no, por lo que la diferencia de rendimiento aquí es 0
  2. Al sobreescribir una propiedad, el analizador debe verificar si la propiedad sobrescrita es importante o no, por lo que la diferencia de rendimiento aquí es 0 nuevamente
  3. Si la propiedad sobreescrita es importante, tiene que sobrescribir la propiedad, ¡golpe de rendimiento de -1 por no usar!
  4. Si la propiedad sobrescrita es importante, se saltea la sobreescritura de la propiedad, lo que aumenta el rendimiento de +1.
  5. Si la nueva propiedad es importante, el análisis debe sobrescribirlo independientemente de que la propiedad sobrescrita 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 lo contrario no saltará.

y como @ryan menciona a continuación, la única manera de anular el CSS en línea y evitar el uso de JavaScript … por lo que otra forma de evitar un rendimiento innecesario golpeó

hmm … resulta que eso! importante es importante

y también,

  • usar! importante ahorra mucho tiempo para un desarrollador
  • a veces te evita rediseñar todo el CSS
  • a veces html o el archivo css padre no está bajo su control, por lo que salva su vida allí
  • obviamente evita que elementos importantes sean accidentalmente sobrescritos por otros 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 es realmente importante y le ahorra escribir toneladas de selectores de 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 desordenarse.

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

¡No puedo prever !important rendimiento obstaculizador !important , no intrínsecamente de todos modos. Sin embargo, si su CSS está llena de información !important , eso indica que ha superado los selectores calificados 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.

Importante meme de regla CSS

Si quieres escribir CSS eficiente, entonces debes ser lo más específico que necesites y escribir CSS modular . Es recomendable abstenerse de usar ID (con hashes), encadenar selectores o seleccionar selectores.

Los identificadores con el prefijo # en CSS son extremadamente específicos, hasta el punto de que 255 clases no anulan una identificación (violín por: @Faust ). Los ID también tienen un problema de enrutamiento más profundo, tienen que ser únicos, esto significa que no puede volver a usarlos para estilos duplicados, por lo que termina escribiendo css lineales con estilos repetitivos. La repercusión de hacer esto variará de proyecto a proyecto, dependiendo de la escala, pero el mantenimiento sufrirá enormemente y, en casos extremos, el rendimiento también.

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

HTML

 

foobar

foobar

foobar

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

De acuerdo, entonces, ¿cómo funciona eso?

El primero 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 la misma especificidad. .eg1/2-bar no hereda su color de .eg1/2-foo porque tiene su propia regla.

El tercer ejemplo parece seleccionar o encadenar selectores, pero no es ninguno de los dos. Encadenamiento es cuando prefieres selectores con padres, ancestros, etc. esto agrega especificidad. La calificación es similar, pero usted define el elemento al que se aplica el selector. calificación: ul.class y encadenamiento: ul .class

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

Se permiten repetidas ocurrencias del mismo selector simple y aumentan la especificidad.

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

Como lo señaló @BoltClock , si hay varias declaraciones importantes, las especificaciones dictan que la más específica debe tener prioridad.

En el ejemplo siguiente, tanto .foo como .bar tienen una especificidad idéntica, por lo que el comportamiento se reduce a la naturaleza en cascada de CSS, por lo que la última regla declarada en CSS reclama prioridad, es decir, .foo .

HTML

 

foobar

CSS

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

JSFiddle