Pentru a afla de ce să nu folosiți * și de ce > este grozav, este important să înțelegeți cum este făcut CSSDOM.
Când aveți un selector, să spunem div p .someclass, browserul trebuie să efectueze o grămadă de verificări.
În primul rând, acesta va aduna fiecare element cu .someclass. Aceasta este o operațiune destul de ușoară. Apoi va verifica toți părinții tuturor .someclasselementelor pe care le-a adunat și va vedea dacă are un părinte p, eliminându-le pe cele care nu îl au. Apoi, va verifica toți părinții tuturor acelor etichete p care au avut copii .someclass pe care i-a adunat din nou pentru părinți div. Acesta este modul în care își dă seama unde se află. Deci, desigur, dacă ați fi putut folosi doar .specific-someclass, ar fi fost mult mai puțin costisitor.
Aici intervine valoarea lui >. Dacă aveți div > p > .someclass, atunci când browserul verifică dacă există p părinți ai .someclass, se poate opri imediat. Trebuie să parcurgă doar un nivel superior. Mult mai puțin costisitor! Încercați să folosiți întotdeauna selectorul descendent direct atunci când este posibil, chiar dacă nu este necesar.
De fiecare dată când apare un *, browserul va trebui să adune fiecare element de pe pagină. Aceasta este o sarcină costisitoare, așa că este mai bine să o evite. Dacă este #some-very-specific-id *, primul lucru pe care îl va face browserul este să adune fiecare element în parte și apoi să verifice fiecare element în parte pentru a vedea care dintre ele au #some-very-specific-id ca strămoș. Fiecare nenorocit de element din pagină este verificat. Bad juju.
Îmi cer scuze dacă informațiile mele sunt depășite. A trecut mult timp de când am fost nevoit să știu ceva despre pictura CSS.