Do more specific css rules load better?

Question

You can do this:

.info
{
    padding: 5px ;
}

Or, if you know it will be a div, you can do this

div.info
{
    padding: 5px ;
}

So, when there's a nested list.. you can do this..

div.info ul.navbar li.navitem a.sitelink
{
    color: #f00;
}

Or you can do this

a.sitelink
{
    color: #f00;
}

Readability aside, which is better for the browser to parse/run?

Answer 1

Keep rules as general as possible -- it is faster and uses less bytes. See Google's article for more info.

Answer 2

I believe the most specific and shortest is almost always the best.

see http://code.google.com/speed/page-speed/docs/rendering.html

Answer 3

Keep rules simple and general as possible is a good start. Someone else will have to read it and make sense of it at some point.

If you are concerned about browser speed performance, stylesheet size, etc? Just run your style-sheets through YUICompressor. It will clean up and minify your CSS (group things together that are repeated for example).