2012-03-08 11 views
5

Me gustaría saber cuál de los siguientes ejemplos tendrá un mejor rendimiento. Si el rendimiento es el mismo, ¿cuál lee mejor? (Selectores de Repetición)¿Qué es más rápido: repetir estilos o repetir selectores?

Ejemplo 1

.helpfulCommenter, .questionTroll { color: #f00; }

.questionTroll { text-decoration: line-through; }

o

(estilos Repetición)

Ejemplo 2

.helpfulCommenter { color: #f00; }

.questionTroll { color: #f00; text-decoration: line-through; }

I saben los nombres de clase son no semántica y los estilos particulares que se muestran aquí son irrelevantes. Solo quiero saber cuáles de estos navegadores tienen un tiempo más fácil de analizar e implementar.

+0

El rendimiento de esto probablemente varía entre navegadores y depende en gran medida de la cantidad de elementos y selectores que tenga. Sin embargo, en última instancia, la diferencia de rendimiento aquí no es importante: elija la que tenga más sentido semántico. –

+0

Los nombres de las clases violan las buenas prácticas (usted está codificando los valores ("rojo", "negrita") en los nombres de las clases). Deberías haber llegado con mejores nombres ... –

+2

@ ŠimeVidas: estoy seguro de que estos fueron solo algunos ejemplos que se le ocurrieron. – xbonez

Respuesta

2

La diferencia de rendimiento es tan minúscula que es irrelevante.

Protéjase del ejemplo 2, ya que lo más probable es que se convierta en un dolor de cabeza de mantenimiento en caso de abuso.

+0

Eso es lo que estaba pensando, que las diferencias entre los dos estaban más relacionadas con el mantenimiento del código que con el rendimiento . ¿Se aplica lo mismo si tengo muchas clases (> 50 o incluso cientos) que necesitan compartir estilos? – Jason

+0

@Jason: Bastante. – BoltClock

+0

@ Jason como sería diferente que tener la misma definición en diferentes selectores. Si diseñas tu 'CSS' correctamente, deberías tener estilos en cascada que minimicen la repetición y una StyleSheet acortada. – xandercoded

Cuestiones relacionadas