CSS: Group Selectors and Declarations

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.

Further Reading

Cascading Style Sheets, level 2 CSS2 Specification

The CSS specification, from the W3C. By Bert Bos et al.

CSS Home Page

From the W3C

CSS Optimization

Summary of chapter on optimizing CSS from Speed Up Your Site: Web Site Optimization.

CSS: Group Declarations

You can group declarations that share the same selector in CSS to shrink your style sheets.

CSS: Group Selectors

You can group selectors that share the same declaration to save space in your CSS files.

CSS: Use Shorthand Properties

Shows how to abbreviate your CSS declarations with font, border, etc.

By website optimization on 10 Dec 2003 AM