Home » CSS: Group Declarations

CSS: Group Declarations

Summary:

Grouping common declarations for the same selector in CSS allows you to apply multiple declarations to one selector to optimize your style sheets.

CSS allows you to group multiple declarations for the same selector into one rule set, separated by semicolons. This allows you to apply multiple declarations to one selector to save space.

So this:

body {font-size: 1em;}
body {font-family: arial, helvetica, sans-serif;}
body {color:#000000;}
body {background:#ffffff;}

Becomes this:

body {
font-size: 1em;
font-family: arial, helvetica, sans-serif;
color: #000000;
background: #ffffff;
}

Even better, use shorthand properties to abbreviate this rule even further, like this:

body{font:1em arial,helvetica,sans-serif;color:#000;background:#fff;}

This abbreviated form of specifying style is supported by most modern browsers. You can combine grouping of declarations with grouping of selectors to create even more powerful CSS rules.

Further Reading

CSS Home Page
From the W3C
CSS Optimization
Summary of chapter on optimizing CSS from Speed Up Your Site: Web Site Optimization.
Cascading Style Sheets, level 2 CSS2 Specification
The CSS specification, from the W3C. By Bert Bos et al.
CSS Support Charts
Eric Meyer. The master CSS reference grid.
CSS: The Definitive Guide
Eric A. Meyer, (O’Reilly, 2000). A great introduction to CSS which includes descriptions of these shorthand properties. See also Meyerweb.com.
CSS: Group Selectors
Grouping selectors with common declarations applies multiple selectors to the same declaration.

Leave a Comment