Call (877) SITE-OPT (748-3678)

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.

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

Copyright © 2002-2013 Website Optimization, LLC. All Rights Reserved - Free website speed test - Privacy Policy
Last modified: August 26, 2013.

Follow us on: Twitter, Google+, Facebook, Linked In