Velocità / ridondanza dei selettori nei CSS [chiuso]

Question

Qualcuno ha informazioni sulla velocità di selezione del browser nei CSS? In altre parole, come diversi selettori si confrontano tra loro (nello stesso browser).

Ad esempio, vedo spesso (e scrivo) codice come questo:

#content #elem { ...rules... }

Ma dal momento che quegli elementi sono ID univoci, dovrei avere bisogno solo di #elem , giusto? Questo mi ha fatto pensare se forse è più veloce per i browser avere selettori più complessi - il mio pensiero è che un browser potrebbe trovare #content e sapere di cercare solo in quell'elemento, nessun altro.

Un altro esempio potrebbe essere table tr td .class vs table .class

Answer 1

Ad essere onesti, stai parlando di così poco tempo che non penso che faccia davvero la differenza.

In termini di utilizzo di selettori più specifici, penso che questa sia una buona pratica per un paio di ragioni:

1. Migliora la leggibilità del codice: a colpo d'occhio può vedere di più dove vengono applicati i selettori rispetto all'HTML.
2. Riduce la probabilità che i selettori vengano sovrascritti altrove, poiché sarebbe stato scritto un selettore con ancora più specificità che è molto improbabile che accada.

Quello di cui stai parlando potrebbe fare la differenza quando si usano librerie JavaScript come jQuery, poiché devono analizzare l'intero documento da soli, ma di certo non ho mai notato alcuna differenza di velocità.

Answer 2

Qui sono alcune informazioni che ho ottenuto dopo una rapida ricerca.

Answer 3

Potrebbe esserci una differenza di velocità ma non è percepibile in nessun caso di normale utilizzo. Il vero motivo per scrivere il tuo CSS in questo modo è la specificità. Questo è se hai

#content #elem {color: black;} 

e

#elem {color: red;}

L'elemento dovrebbe essere colorato di nero poiché questa è la regola più specifica.

Answer 4

Non essere un ragazzo saggio, ma il tempo impiegato per scrivere quella domanda probabilmente supera la somma di tutti i risparmi di tempo di tutti gli utenti che visiteranno mai il tuo sito (in relazione a #id # id2 vs # id2) . Così fa il momento di scrivere questa risposta ....

puoi votarmi adesso :)

Answer 5

Le linee guida di Mozilla potrebbero essere interessanti.

Answer 6

1. C'è sempre una scelta tra efficienza e leggibilità. Ovviamente table tr td .class è più leggibile, ma molto inefficiente e può essere semplificato - hai visto da qualche parte (presupponi un markup valido) tr senza table o td senza tr ? Almeno puoi commentare una parte ridondante come:

   /* table tr */ td .class {
       color: #ccf;
   }
   

2. A volte, come altri hanno già detto, è necessaria ulteriore specificità, ad es. il tuo #elem dovrebbe essere rosso ovunque tranne che nel contesto specifico di #content .

   #elem {
       /* usually red */
       color: red;
   }
   
   #content #elem {
       /* except when in specific context */
       color: black;
   }