Debo apuntar a agregar una clase/identificación a todo, o utilizar otros selectores

Question

Nunca estoy seguro de cuál es la mejor (la manera más eficiente) de seleccionar un elemento.

Digamos que tengo la siguiente distribución (ejemplo extremadamente simple)

<div id="navigation"> 
    <ul> 
    <li>Link 1</li> 
    <li>Link 2</li> 
    <li>Link 3</li> 
    </ul> 
</div> 

1. quiero seleccionar mi lista desordenada (asegurando que no afecta a ninguna otra UL a través de mi sitio), debo hacer #navigation ul {} o asignar una clase a la UL?
2. Quiero seleccionar los elementos de mi lista, asegurándome de que solo los afecte. ¿Debo hacer navigation ul li{} o asignar una clase?
3. Y, por último, si quiero seleccionar mi primer enlace y darle un estilo, ¿debo hacer #navigation ul li:first-child {} o asignar una clase?

Aprecio que estas preguntas sean más o menos las mismas, pero tengo curiosidad cuando debería usar una clase y cuándo no.

Answer 1

No hay una respuesta difícil aquí.

Una regla general puede ser utilizar clases cuando se desea agrupar ciertos elementos, tratarlos igual y usar una clase es el único medio para hacerlo.

En su último ejemplo, por ejemplo, estrictamente no hay necesidad de una clase.

Pero, usar una clase en el ejemplo 3 dará como resultado un mejor rendimiento, ya que el navegador ubicará los elementos relevantes más rápidamente. En cambio, esto se traduce en una ligera reducción en la legibilidad del código. Si tiene nombres de clase en todo, le resulta más difícil leer el resto del marcado.

En resumen, en lo que has mostrado anteriormente, lo que has escrito está bien.

Debe leer el artículo this que cubre la eficiencia del selector.

Básicamente, el orden de eficiencia es la siguiente:

ID, e.g. #header 
Class, e.g. .promo 
Type, e.g. div 
Adjacent sibling, e.g. h2 + p 
Child, e.g. li > ul 
Descendant, e.g. ul a 
Universal, i.e. * 
Attribute, e.g. [type="text"] 
Pseudo-classes/-elements, e.g. a:hover 

La diferencia de rendimiento entre las clases y el ID del que normalmente es irrelevante.

Sin embargo, yendo más abajo en la lista, las cosas se ralentizan considerablemente.

Este no es un argumento para agregar clases e identificadores en todas partes, solo le permite juzgar la compensación entre el rendimiento y la capacidad de mantenimiento.

Answer 2

#id debe ser exclusivo y la clase no.

así que si necesita agregar algo de JS - necesita #id, si solo quiere diseñar elementos diferentes, .class está bien.

Answer 3

Creo que realmente depende de cuán compleja será la estructura debajo del elemento #navegación. Hacer referencia a todo utilizando el elemento #navigation probablemente sea correcto si se trata de una estructura simple como la que ha mostrado, pero para mí, si es más compleja o tendrá diferentes elementos ul, li que necesitarán comportamientos diferentes, entonces identificaría/clasificaría el anidado elementos.

Answer 4

Para el uso de Javascript, creo que es más rápido que usar el selector nativo, y no hay clase o id.

Para más detalles, creo que simplemente probar esta teoría con código complejo (para ver el tiempo diferente).

No olvides que la versión más rápida de javaScript depende de tu navegador.

Para CSS, un buen artículo es here para más detalles.