CSS: Group Selectors and Declarations

Summary: By grouping CSS selectors that share the same declaration and declarations that share the same selector you can apply multiple declarations to multiple selectors to optimize your style sheets.

By combining the grouping of selectors that share the same declaration and declarations that share the same selector you can apply multiple declarations to multiple selectors. This technique allows you to create compact yet powerful CSS rules. This tip combines Group Selectors with Group Declarations into one powerful technique.

So this:

body {font-size: 12px; }
body {font-family: arial, helvetica, sans-serif;}
th {font-size: 12px; font-family: arial, helvetica, sans-serif;}
td {font-size: 12px; font-family: arial, helvetica, sans-serif;}

Becomes this:

body, th, td {font-size: 12px; font-family: arial, helvetica, sans-serif;}

Even better, use shorthand properties to create an optimized CSS rule:

body,th,td{font:12px arial,helvetica,sans-serif;}

Note that well-behaved browsers don't need the th and td selectors because the body rule is inherited by any tables within the body. However, Netscape 4.x does not reliably inherit styles within tables, thus the additional selectors. You could ignore Netscape 4.x, and some leave off helvetica to create a minimalist rule:

body{font:12px arial,sans-serif;}

Note also that we prefer using relative units for fonts for better accessibility, like ems. You can combine grouped selectors and declarations with shorthand properties, contextual, descendant, and type selectors to create powerful yet compact rule-based styles.

There is one other grouping technique that you can use to shrink your styles. We'll cover that technique in an upcoming tweak.