2011-10-02 27 views
19

Me asumir que esto sería más rápido:CSS: #id .class VS .class performance. ¿Cual es mejor?

#dialog .videoContainer { width:100px; } 

que:

.videoContainer { width:100px; } 

Por supuesto, sin tener en cuenta que .videoContainer en el primer ejemplo sólo habría labrado bajo la etiqueta de #dialog.

+0

Creo que tienes al revés ... No estoy seguro de embargo. Si el '# diálogo' no es necesario, no lo usaría –

+0

@Drew - Supongo que el análisis de identificación es el más rápido que solo se vería en #dialog no? – Ryan

+3

Google tiene algunos buenos consejos para escribir selectores: http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors – Pat

Respuesta

23

Los selectores de CSS son matched from right to left.

Por lo tanto, .videoContainer debe ser "más rápido" que #dialog .videoContainer porque se pierde la prueba de #dialog.

Sin embargo, todo esto es irrelevante en el mejor de los casos; nunca notará la diferencia. Para páginas de tamaño normal, la cantidad de tiempo que estamos hablando es tan insignificante que es inexistente.

Aquí hay una respuesta apropiada por un experto que debe leer: Why do browsers match CSS selectors from right to left?