¿Qué CSS Selector es una mejor práctica?

Question

Me pregunto qué selector es una mejor práctica y por qué?

Código HTML de ejemplo

<div class="main"> 
    <div class="category"> 
     <div class="product"> 
     </div> 
    </div> 
</div> 

y queremos llegar a .product con selectores CSS:

1. .product
2. .main .category .product
3. div.main div.category div.product

los estoy comparando con los siguientes criterios:

• Rendimiento
• mantenibilidad
• legibilidad

se puede suponer que .product es único en toda la página. Podemos haber usado id en lugar de clase, pero en este caso, elegimos el atributo de clase.

Answer 1

Podemos suponer que .product es único en toda la página.

En cuanto al rendimiento del mejor sería, por supuesto, haber sido un selector de ID, pero ya que estás usando una clase lugar, .product vendría segundos.

cuanto a facilidad de mantenimiento, la legibilidad y la semántica (hay un poco más en el rendimiento, así) ...

1. .product significa

   encuentra elementos que tienen una clase product.

   Muy fácil de entender, casi idéntico a un selector de ID si usa esto basado en la suposición anterior.

   Supongo que la única diferencia entre usar un selector de clase y un selector de ID en este caso es que un selector de ID impone la exclusividad de este elemento, y no solo porque sucede como uno de esos elementos.En otras palabras, un selector de ID actúa sabiendo que un documento solo tendrá un elemento único, mientras que un selector de clase no lo hará.

2. .main .category .product significa

   encuentra elementos que tienen una clase product
   que están contenidos en los elementos que tienen una clase category
   que están contenidos en los elementos que tienen una clase main.

   Los navegadores tienen la tarea de verificar la ascendencia de estos elementos, lo que es redundante si solo tiene uno .product. Muchos motores de diseño de navegador evaluate CSS selectors from right to left, de forma similar a como he traducido el selector al inglés como se indica anteriormente.

3. div.main div.category div.product significa

   encontrar sólo <div> elementos que tienen una clase product
   que están contenidas en sólo <div> elementos que tienen una clase category
   que están contenidas en sólo <div> elementos que tienen una clase main .

   Además, con el control de la jerarquía de los elementos, se espera un navegador sólo para que coincida con un div con la clase product. Si desea hacer coincidir cualquier elemento de esta clase, este selector no funcionará como se esperaba.

   Si está seguro de que sólo va a tener exactamente un div con esa clase, y que sólo se desea detectar ese elemento, entonces se podría utilizar div.product lugar, pero todavía se realiza .product fraccionada mejor.

Answer 2

No soy un gurú pero al menos puedo comentar.
creo primera forma es fácilmente el mejor:

• evita que el CSS de tener que recorrer el árbol DOM para encontrar un elemento,
• si edita cualquiera de los elementos padre, entonces tendrá que editar el selector de CSS. Legibilidad: elección personal, algunas personas pueden como el segundo, pero la mayoría no me importa

Answer 3

Todos los tres selectores tienen diferentes significados y se deben usar en diferentes lugares según sea necesario. Rendimiento sabio, el primero debería ser el mejor, porque solo tenemos que viajar el DOM una vez. En cuanto a la legibilidad, el segundo y el tercer selector parecen engorrosos y pueden ser difíciles de ampliar en el futuro.

Answer 4

La primera manera .product es la mejor y la más fácil. Si usa el producto, no necesita examinar todo el archivo para encontrar lo que está buscando. También puede usar un selector de ID sin usar una clase.

Answer 5

Siempre trato de usar el selector más pequeño posible, así que solo usaría .product (es decir, su primer ejemplo). Creo que esto también tiene beneficios de rendimiento ya que el navegador solo tiene que encontrar elementos marcados con esa clase única, en lugar de tratar de encontrar primero un elemento primario coincidente, luego verificar si tiene un descendiente marcado con esa clase, etc.

La única razón por la que generalmente tienen que utilizar los otros métodos que mencionas es decir si:

• estoy intentando añadir un estilo específico en un contexto específico.Por ejemplo, si quería poner en negrita todos los enlaces internos (en una clase .internal_link), pero quería que también se los subrayara si aparecían en un contexto determinado.
• Necesito agregar especificidad para forzar que mi regla entre en vigor.

Por último, si usted está asumiendo que sólo habrá un elemento marcado con la clase .product, entonces usted está probablemente mejor usar eso como una identificación más que como una clase.

Answer 6

1. .product
2. .main .category .product
3. div.main div.category div.product

Utilizando los selectores anteriores están en función de la complejidad de su sitio es.

Ej.

1. Si todos estos elementos son solo de uso. El primer selector puede estar en forma.

2. La segunda manera es la mejor práctica si estuviera usando esto para múltiples páginas (ej. Usted tiene estos elementos para un conjunto de productos).

3. La tercera manera para mí no es necesaria a menos que tenga este nombre de clase en otras etiquetas HTML como lapso ..

consejos más: Mushu Tricks