Per sapere perché non usare * e perché > è ottimo, è importante capire come è fatto il CSSDOM.
Quando hai un selettore, diciamo div p .someclass, il browser deve eseguire un mucchio di controlli.
Per prima cosa, raccoglierà ogni elemento con .someclass. Questa è un’operazione abbastanza facile. Poi controllerà tutti i genitori di tutti i .someclassche ha raccolto e vedrà se ha un genitore p, scartando quelli che non ce l’hanno. Poi, controllerà tutti i genitori di tutti quei tag p che avevano figli .someclass che ha raccolto di nuovo per i genitori div. Questo è il modo in cui capisce dove si trova. Quindi, naturalmente, se aveste potuto usare solo .specific-someclass, sarebbe stato molto meno costoso.
Ecco dove entra in gioco il valore di >. Se avete div > p > .someclass, quando il browser controlla per p genitori di .someclass, può fermarsi subito. Ha solo bisogno di risalire di un livello. Molto meno costoso! Cerca di usare sempre il selettore discendente diretto quando possibile, anche se non è necessario.
Ogni volta che appare un *, il browser dovrà raccogliere ogni singolo elemento della pagina. Questo è un compito costoso, quindi è meglio evitarlo. Se è #some-very-specific-id *, la prima cosa che il browser farà è raccogliere ogni singolo elemento e poi controllare ogni singolo elemento per vedere quali hanno #some-very-specific-id come antenato. Ogni singolo maledetto elemento nella pagina viene controllato. Bad juju.
Scusa se le mie informazioni non sono aggiornate. È passato molto tempo da quando ho dovuto sapere qualcosa sulla pittura CSS.