Selettori CSS multipli per bambini vs prestazioni del selettore di tag singoli

Question

In teoria i selettori di figlio CSS sono più efficienti dei selettori di tag. Ma cosa succede quando hai una classe e devi disegnare un tag specifico all'interno di questo elemento di classe, ma non sono un bambino di primo livello?

Vediamo un esempio:

.styled-table > tbody > tr > td{ 
    // Some cell styles 
} 

VS

.styled-table td{ 
    // Some cell styles 
} 

Quale di questi è una migliore prassi esecutiva CSS?

Answer 1

Per MDN: Evitare il selettore discendente ~

Il selettore discendente è il selettore più costosa in CSS.. È spaventosamente costoso, soprattutto se il selettore si trova nel Tag o nella categoria universale.

Se si pensa che attraverso la logica, con un selettore discendente, il motore CSS controllerà ogni bambino dell'elemento principale (in questo caso .styled-table) alla ricerca di corrispondenze (in questo caso il tag td) e poi ognuno figlio di quei bambini e così via e così via.

Con un selettore di figlio, però, stai dicendo al motore esattamente quale "percorso" seguire per cercare una corrispondenza. Se non riesce a trovare una corrispondenza in qualsiasi punto del percorso (ad es., Se il tuo .styled-table non ha uno tbody come uno dei suoi figli immediati), allora abbandonerà il selettore.