[css-d] Using efficient selectors?
Hi!
I have a question about efficient selectors. I tried Page Speed
extension for Firebug which analyzed use of efficient CSS selectors
among lots of other things.
Page Speed considered longer(#header ul li a) selectors inefficient and
recommended to fix them.
Is there a good reason to use this kind of selector #header ul li a
{..., instead of just #header li a? Is it considered best practice,
or why this is so commonly used?
Ville
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Using efficient selectors?
On Sat, 28 Aug 2010, Ville Viklund wrote:
I have a question about efficient selectors. I tried Page Speed extension for
Firebug which analyzed use of efficient CSS selectors among lots of other
things.
Page Speed considered longer(#header ul li a) selectors inefficient and
recommended to fix them.
Is there a good reason to use this kind of selector #header ul li a {...,
instead of just #header li a? Is it considered best practice, or why this
is so commonly used?
I doubt that the difference in speed would be significant, but I'd
use the shorter one on principle.
The longer version can be used if you need extra specificity for
this rule.
--
Chris F.A. Johnson, http://cfajohnson.com
Author:
Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress)
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Using efficient selectors?
Ville Viklund wrote:
Is there a good reason to use this kind of selector #header ul li a
{..., instead of just #header li a? Is it considered best practice,
or why this is so commonly used?
I would venture a guess that it is commonly used because of a fairly
widespread misunderstanding of exactly how contextual selectors work.
If one consults (e.g.) Htmlhelp.com, an early reference site for
HTML CSS, one is told :
Contextual selectors are merely strings of two or more simple selectors
separated by white space. These selectors can be assigned normal properties
and, due to the rules of cascading order, they will take precedence over simple
selectors. For example, the contextual selector in
P EM { background: yellow }
is P EM. This rule says that emphasized text within a paragraph should have a
yellow background; emphasized text in a heading would be unaffected.
Note emphasized text within a paragraph; nowhere does this
suggest that the rule might apply to (e.g.) emphasized text
within spanned element within a paragraph, so the naïve user
might believe that in order to achieve the latter, he/she
should write P SPAN EM.
One could even argue that the W3 prose is not as helpful
as it might be, although the spec. is unambiguous if
one reads it properly. For example, at :
http://www.w3.org/TR/REC-CSS1/#contextual-selectors
one can read (for H1 EM) In the example above, the search
pattern matches if 'EM' is a descendant of 'H1',
i.e. if 'EM' is inside an 'H1' element.
Note is inside an 'H1' element, which again may suggest
to the naïve reader that it must be /directly/ inside.
I really think it is as simple as that : a widespread
misunderstanding.
Philip Taylor
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
