Optimize css vs Google page speed is messing with me

Question

I'm using google page speed and it's telling me my css is inefficient...

Very inefficient rules (good to fix on any page):

* table.fancy thead td    Tag key with 2 descendant selectors and Class overly qualified with tag
* table.fancy tfoot td    Tag key with 2 descendant selectors and Class overly qualified with tag

The css rules are

table.fancy {border: 1px solid white; padding:5px}
table.fancy td {background:#656165}
table.fancy thead td, table.fancy tfoot td {background:#767276}

I want the header and footer in a different background color than the body of the table (a data table)

• On what grounds this is inefficient?
• How to make it more efficient?

I will not add a class to the thead and tfoot for googles's sake.

Answer 1

Google's page speed says that specifying 2 descendants is inefficient, which may be true, but I doubt it'll make any difference on the end-user's experience. On the other hand, sometimes you have to use this way to do what you want. Other times, it's a matter of making the CSS easier to read and maintain.

Ultimately it's your CSS, so do what you want. I don't think that micro-optimization will matter.

See also: this question