Welcome to WebmasterWorld Guest from 54.145.65.62

Forum Moderators: not2easy

Message Too Old, No Replies

Use efficient CSS selectors

     
8:40 am on Aug 11, 2011 (gmt 0)

New User

5+ Year Member

joined:Aug 11, 2011
posts: 2
votes: 0


I validated my website on
"css validator" and "xhtml validator".
now everything is ok but when I check my site on "gtmetrix.com"
I get this error:



#ja-container ul.menu li li
Tag key with 3 descendant selectors and Class overly qualified with tag



in my css file:

#ja-container ul.menu li li{
background:none;
border:none}

#ja-container ul.menu li li a{
color:#b3b3b3;
font-size:92%;
font-weight:400!important;
text-indent:15px;
text-transform:none;
width:100%
}


what is the wrong? I think that css code is normal!

[edited by: alt131 at 5:24 pm (utc) on Aug 13, 2011]
[edit reason] Thread Tidy [/edit]

9:26 am on Aug 11, 2011 (gmt 0)

Junior Member

10+ Year Member

joined:May 28, 2003
posts: 198
votes: 4


If there is only one ul.menu in your page then the id is irrelevant (apart from specificity) and can be omitted.


ul.menu li li{}


If specificity is an issue and if you still only have one ul.menu in your page then you can omit the ul.menu from the rule above instead of the id as the target will still be reached.


#ja-container li li {}


The only time you would need your original rule is if within the context of #ja-container you had other uls (not the ones within ul.menu) or if indeed ul.menu was itself nested within another ul or if there were any ul.menu outside of the id.

I think I just made that sound more complicated than it is :)
9:39 am on Aug 11, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:13210
votes: 347


I think I just made that sound more complicated than it is

"If you've only got one of something, it doesn't need a class." :)
5:15 pm on Aug 13, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0


Hi valanews, and welcome to WebmasterWorld :)

what is the wrong? I think that css code is normal!
Good on you for bothering to validate - and I think you've raised the really good issue that this sort of code is seen so often it has become "normal". To my mind this is a situations where "what is commonly used" is not the same as "best practise".

Recall the validator checks for whether code is valid - not whether it is efficient, or even "necessary" as explained by Paul and Lucy. There are many reasons code ends up being overqualified in this way, and as Paul has referred, often caused by not coding to take full advantage of the "cascade" and "specificity". That doesn't mean the code is "wrong" - but it does mean the code is far less efficient than it could be. Given one aim of code is to deliver content to users as efficiently as possible, it makes sense to give that some priority.

I think I just made that sound more complicated than it is
"If you've only got one of something, it doesn't need a class."
Both make sense to me ;)
7:38 pm on Aug 16, 2011 (gmt 0)

New User

5+ Year Member

joined:Aug 11, 2011
posts: 2
votes: 0


Paul_o_b,ucy24,alt131
Thanks for your answers, this post was very useful for me/