C'è un vantaggio nell'utilizzare selettori molto specifici nei CSS?

Question

Comprendo che in jQuery è vantaggioso essere più specifici quando si utilizzano i selettori in modo che jQuery non debba attraversare l'intero DOM per trovare quello che stai cercando. Ad esempio, $('span.description') è meglio del semplice $('.description') se so che la description classe è sempre e solo applicata a <span> elementi.

È anche il caso dei CSS? C'è qualche vantaggio specifico per me usare span.description { } invece di .description { }? Sto pensando in termini di velocità, ottimizzazione, ecc. Sto salvando il browser qualsiasi lavoro dicendogli esattamente dove cercare?

Answer 1

Questo è vero nei CSS -

Una buona regola è scendere dall'ID più vicino. Gli ID sono indicizzati, quindi individuarli è estremamente veloce. Non c'è motivo di usarne più di uno nel selettore.

Codice Google - Ottimizza il rendering del browser

Questo ha risposto a molte domande sull'argomento, incluso questo- Spero che lo trovi utile.

Answer 2

Leggi la specificità dei CSS - che è la ragione più importante per essere più o meno specifici con i tuoi CSS.

http://www.w3.org/TR/CSS2/cascade .html # specificità

Dato che le prestazioni del browser sono praticamente un problema (tranne che in jquery, come hai già detto), la mia linea guida deve essere specifica quando controlli la precedenza o quando vuoi rendere qualcosa di un po 'più leggibile in il tuo css. Una specifica eccessiva può rendere difficile riutilizzare i selettori CSS e rendere le cose eccessivamente complicate.

Modifica

Sembra un po 'duplicato:

Domanda sulle prestazioni CSS

Answer 3

dipende sempre dalla quantità di codice html e dalla struttura. È sicuramente una buona idea usare in particolare ID e selettori appropriati. (ad esempio #nav li anziché li.nav). Dal momento che il browser carica prima l'html e quindi applica il CSS, stai aiutando molto.

Detto questo, quando si tratta di puro CSS (senza jquery) la differenza di velocità non è oggi facile da distinguere, perché i motori di rendering sono altamente ottimizzati, specialmente quando si tratta di applicare CSS. Quindi normalmente non dovrebbe importare.

Answer 4

Per quanto ne so, quanto specifici sono i selettori che fanno la differenza sul rendimento.

Le due aree in cui i selettori più specifici sono più utili, è ridurre il rischio che non venga applicato dove non lo si desidera e fare in modo che un selettore abbia la precedenza su un altro.

Answer 5

Una regola più specifica ha la precedenza su una regola meno specifica, quindi:

span.myclass {}

ha la precedenza su:

.myclass {}

(indipendentemente dall'ordine in cui sono state dichiarate le regole)