Is it inefficient to specify default rules to CSS?

Question

As an example, imagine I have a table. The standard alignment behaviour (not sure if this is html specification or just the browsers I use?) seems to be to left align the body elements and center align the head elements.

So if I wanted everything left aligned, is it less efficient to write

#MyTable td {
    text-align: left;
}

than to write

#MyTable tbody td {
    text-align: left;
}

Or does it not really make any difference?

What is best practice in this situation?

I guess my question is really about how "default" styles get set. Are they actually explicitly set by the browser if no matching style if found in the css? Or are they genuine default behaviours when no style is present.

Answer 1

You can see the browser's default and computed style with firebug/webkit built-in inspector. The selector matching goes from the right to the left. So the first should be faster, in theory. In practice there is hardly any difference. Even for ~100 elements. But if you want to write efficent selectors the rule is simple: Be the rightmost selector as specific as it can be.

• Performance Impact of CSS Selectors
• Writing Efficient CSS

Answer 2

By default, everything is left-aligned unless otherwise specified (although the situation may be different for some languages like Arabic). There is a suggested stylesheet for HTML elements, but it is not part of the spec.

If you are overriding text-align for every table individually then it could be a bit of a problem. Browsers match CSS right-to-left so with your rules they will first find all td elements and search upwards to find a parent with that ID. The best method would be to go simpler:

td {
    text-align: left;
}

But in all honesty it's probably only worth doing this for elements where the alignment is different to the default, like the <th> element.