Optimización de CSS, selectores anidados e indexación del navegador de nombres de ID/clase

Question

Al representar páginas web y aplicar estilos, los navegadores indexan ID y nombres de clase para una búsqueda eficiente, o atraviesa todo el DOM desde la parte superior cada vez que se identifica o el nombre de la clase se especifica para llegar al elemento correcto.

Me pregunto por razones de optimización, y si vale la pena darle las sugerencias del navegador (selectores más largos) a donde está el objeto de una cierta identificación. Es decir.

#container #one-of-many-container-siblings #my-id 

en lugar de:

#my-id 

¿El ex rendimiento mejor rendimiento si el DOM es bastante grande?

Answer 1

En realidad funciona de manera opuesta a lo que estás pensando.

Recuerde que los navegadores analizan los selectores de CSS de derecha a izquierda.

Este:

#container #one-of-many-container-siblings #my-id 

va a tomar más medidas para que coincida con que esto:

#my-id 

Ver: http://www.css-101.org/descendant-selector/go_fetch_yourself.php

Teniendo en cuenta la cuestión que sólo ha pedido, le recomiendo que lea este artículo:

http://css-tricks.com/efficiently-rendering-css/

Se le ayudará a escribir selectores más eficientes:

#main-navigation { }  /* ID (Fastest) */ 
body.home #page-wrap { } /* ID */ 
.main-navigation { }  /* Class */ 
ul li a.current { }  /* Class * 
ul { }     /* Tag */ 
ul li a { }    /* Tag */ 
* { }      /* Universal (Slowest) */ 
#content [title='home']  /* Universal */ 

Answer 2

El uso de la versión más corta siempre será más rápido porque se realizan menos comprobaciones, sin embargo, no sé por qué habría que optimizar el CSS en una página.

Answer 3

es mejor utilizar 2 o menos selectores como regla general para el rendimiento.

Answer 4

La definición de una identificación en HTML/CSS es una sola instancia de un elemento. Asumiendo que estás siguiendo esa regla, entonces todo lo que necesitas es la ID de ese elemento. El navegador buscará y encontrará ese elemento y se detendrá.

Con su "sugerencia", primero buscará el primer elemento, luego el segundo, luego el tercero, antes de parar. Esto, como probablemente puedas ver, es más ineficiente.

Cuando se trata de clases, esto puede ser un poco más ambiguo y borroso, pero la regla general es que cuantos menos selectores haya, mejor. Si se encuentra haciendo tres, cuatro o cinco selectores, podría valer la pena considerar una pequeña refactorización, como agregar clases o ID en lugares estratégicos, o incluso no ser tan específico con los selectores de CSS.