Si los selectores de CSS son por #id, ¿necesita delimitarlos?

Question

Si tengo una estructura como esta:

<div id="main"> 
    <div id="sidebar"> 
    <div id="tag-cloud"/> 
    </div> 
</div> 

... ¿Cuál es la mejor práctica para css:

#main #sidebar #tag-cloud { ... } 
#tag-cloud { ... } 

O si era id='main' lugar class='main', podría ser peor que el alcance? Me pregunto, si tienes identificadores, ¿necesitas un alcance?

Answer 1

Depende. La mayoría de las veces, se podría decir:

#tag-cloud { ... } 

es el mejor (en cuanto a rendimiento, ver a continuación). Esto:

#main #sidebar #tag-cloud { ... } 

simplemente hace un montón de comprobaciones innecesarias que tienen éxito.

A menos que desee hacer esto:

#sidebar #tag-cloud { ... } 
#not-sidebar #tag-cloud { ... } 

en cuyo caso alcance define un aspecto diferente dependiendo de donde es #tag-cloud. Por supuesto, solo puede haber un #tag-cloud en su página, pero su CSS podría manejar ambos casos de todos modos.

---

Las comprobaciones CSS se realizan de derecha a izquierda. Este:

#main #sidebar #tag-cloud { ... } 

se evalúa como:. "El elemento con ID tag-cloud que tiene un padre con ID sidebar que tiene un padre con ID main Si es así como se ve su sitio todos modos, eso es sólo un montón de inútiles DOM recorrido.

por no hablar del hecho de que con más específica, de alcance superflua toda la CSS debe cambiar en muchos lugares si se modifica la estructura del sitio, que de alguna manera desafía el propósito.

Answer 2

Normalmente, no debería haber colisiones de ID en su documento html. Entonces, desde esa perspectiva, determinar las identificaciones es una pérdida de tiempo.

Sin embargo, si tiene incorrectamente varios elementos con el mismo ID, es posible que necesite utilizar el alcance. Pero esto da como resultado html no válido y puede causar otras consecuencias indeseables y, por lo tanto, debe evitarse.

Answer 3

identificadores tienen que ser únicos en un documento, a menos que esté por alguna razón compartirlos a través de las páginas, donde puede #something una cosa totalmente diferente en un recipiente diferente en otra página, que acababa de usar:

#tag-cloud { ... } 

Answer 4

No creo que tenga mucho sentido el alcance de los identificadores, sin embargo, prefiero que todos mis otros selectores alcancen una identificación.

Tal vez deberías pedirte a ti mismo si necesitas todas las identificaciones o si algunas deberían tener clases o nada en absoluto. Menos es más.

Answer 5

identificadores deberían ser único, por lo que el alcance debería ser innecesarioUn buen motor de JavaScript utilizará estos ID como claves para buscar rápidamente un elemento por ID, por lo que el alcance realmente ralentizará las cosas.

Sin embargo, podría tener un documento no válido con varios ID, en cuyo caso el alcance asegurará que no esté golpeando varios elementos inesperadamente. Pero en este caso, realmente debería arreglar sus identificaciones.

Answer 6

siempre alcance. Puede que solo tenga el tag-cloud en esta página, pero puede tener un tag-cloud diferente en otra área de su sitio web, que requiere un estilo diferente.

Personalmente, me abstengo de utilizar ID en mi CSS. Son restrictivos y pueden causar problemas si su sitio estático alguna vez cambia a uno dinámico donde los identificadores son re-renderizados (es decir, ASP.NET).

Answer 7

Ya lo dijo usted mismo: las identificaciones son únicas. Entonces, los alcances solo agregan desorden. Pero si estuvieran intencionalmente allí para fines puramente documentales, los reemplazaría simplemente por sangrar las reglas.

E.g. en lugar de

#main { 
    /**/ 
} 

#main #sidebar { 
    /**/ 
} 

#main #sidebar #tag-cloud { 
    /**/ 
} 

hacer

#main { 
    /**/ 
} 

    #sidebar { 
     /**/ 
    } 

     #tag-cloud { 
      /**/ 
     } 

Answer 8

mejor práctica de la identificación es para su uso como envoltorio

<div id="main"><!--main wrapper--> 
    <div id="section"><!--section wrapper--> 
    <p>something</p> 
    </div> 
    <div id="sidebar"><!--sidebar wrapper--> 
    <div class="tag-cloud"> 
    </div> 

</div> 

su mejor su inicio con el último Id

#sidebar #tag-cloud { ... } 

AS por google page velocidad herramienta de error de incendio, que recomienda utilizar menos profundidad como selector de css

Answer 9

No, no debe identificar los identificadores porque deben ser únicos por página. Si tiene varios elementos que usan la misma ID, su HTML no se validará y causará problemas al intentar acceder al DOM a través de javascript.

Por ejemplo, si tiene múltiples de ID en la página:

var myElements = document.getElementById('myduplicateid') 

devolvería el primer elemento se encontró que coincidía con lo cual puede no ser el resultado deseado.

si usted está teniendo problemas con subir con identificadores de objetos similarmente agrupados, recomiendo hacer algo como esto (ejemplo botón de radio)

<input type = "radio" id = "my_radio:1" value = "1" name = "my_radio"> 
<input type = "radio" id = "my_radio:2" value = "2" name = "my_radio"> 

En su Javascript, usted entonces hacer algo como esto:

var my radio = document.getElementById('my_radio:1') 

O de que está utilizando jQuery, algo como esto:

var my radios = $('#my_radio\\:1') # Must escape colon with double slash since it's a special character in jQuery