Avoid tag selectors for common elements
"To determine whether a CSS rule applies to a particular element,
browsers starts from the right of the rule and works its way left.
If you have a rule like body div#content p { color: #003366; }
then for every element—as it gets rendered to the page—it will
first ask if it is a paragraph element. If it is then it will
work its way up the DOM and ask if it is adivwith an ID of content.
If it finds what it is looking for, it will continue its
way up the DOM until it reaches the body."
That means, for .klass span, it will search for .klass in parents of every span element on the page. If we used .klass .span instead, the .klass is searched only for one element.
References: SMACSS
See also: Don't git commit -m "merge"
Written by Adam Stankiewicz
Related protips
1 Response
I'd be very skeptical about this recommendation. Among other things, there's no guarantee that every browser implements its CSS parser in the same way, despite what the quotation implies. I wouldn't put any faith in this rule unless I saw some good benchmarks across browsers.
