Pro informace o tom, proč nepoužívat *
a proč je >
skvělý, je důležité pochopit, jak se vytváří CSSDOM.
Když máte selektor, například div p .someclass
, prohlížeč musí provést hromadu kontrol.
Nejprve shromáždí každý element s .someclass
. To je poměrně snadná operace. Poté zkontroluje všechny rodiče všech shromážděných prvků .someclass
a zjistí, zda mají rodiče p
, přičemž ty, které je nemají, vyřadí. Poté znovu zkontroluje všechny rodiče všech těch značek p, které měly .someclass
děti, které shromáždil, zda nemají rodiče div
. Takto zjistí, na čem je. Takže kdybyste samozřejmě mohli použít jen .specific-someclass
, bylo by to mnohem méně nákladné.
Tady přichází na řadu hodnota >
. Pokud máte div > p > .someclass
, může se prohlížeč při kontrole p
rodičů .someclass
hned zastavit. Stačí mu projít o jednu úroveň výše. To je mnohem méně nákladné! Snažte se vždy, když je to možné, používat selektor přímého potomka, i když to není nutné.
Kdykoli se objeví *
, prohlížeč bude muset shromáždit všechny jednotlivé prvky na stránce. To je nákladný úkol, proto je lepší se mu vyhnout. Pokud je to #some-very-specific-id *
, prohlížeč nejprve shromáždí každý jednotlivý prvek a pak zkontroluje každý jednotlivý prvek, aby zjistil, které z nich mají jako předka #some-very-specific-id
. Kontroluje se každý zatracený prvek na stránce. Bad juju.
Omlouvám se, pokud jsou mé informace zastaralé. Už je to dlouho, co jsem musel něco vědět o malování CSS.