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