homepage Welcome to WebmasterWorld Guest from 107.22.45.61
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Use efficient CSS selectors
valanews




msg:4350249
 8:40 am on Aug 11, 2011 (gmt 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]

 

Paul_o_b




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

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 :)

lucy24




msg:4350265
 9:39 am on Aug 11, 2011 (gmt 0)

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." :)

alt131




msg:4351196
 5:15 pm on Aug 13, 2011 (gmt 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 ;)
valanews




msg:4352165
 7:38 pm on Aug 16, 2011 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved