WebSiteOptimization.com Higher traffic and speed guaranteed.™

Chapter 7: CSS Optimization

CSS optimization is the process of minimizing your markup and CSS files for maximum speed. You can employ some of the same techniques to optimize CSS that you learned in Chapter 3, "HTML Optimization." Whitespace removal, cutting comments, crunching color values, and embedding code with SSI are some of the techniques common to both CSS and HTML optimization. CSS gives you more flexibility than HTML or XHTML, however, because you can make up your own names and group rules together to save space.

You'll reap the greatest rewards by using CSS to transform your code into a more rule-based modus operandi. Converting old-style table/font layouts into XHTML/CSS-style code typically saves 25 to 50 percent off file sizes and gives you the benefits of adaptable structure and separate presentation. You can use layering and inheritance to save space and increase compatibility, and use shorthand properties to shrink your CSS code by up to 50 percent. This chapter gives you the tools you need to optimize your CSS.

Figures

• Figure 7.1 - The CSS box model
• Figure 7.2 - The Netscape 4 box model

Code Listings

• Listing 7.1 - Four Ways to Apply Styles - Piet Mondrian's Home Page

Summary

Use CSS to strip presentation out of your (X)HTML. To optimize your CSS group external files to minimize HTTP requests, remove whitespace, and use shorthand properties. Group common declarations, selectors, and CSS code in multiple classes to save space. Use the simplest selectors you can, high in the document tree and let them cascade. Be as vague and as abstract as possible in your CSS selectors.

• Embed or SSI abbreviated styles for maximum speed.
• Minimize HTTP requests by grouping external CSS files.
• Link to external style sheets site-wide to cache in.
• Layer style sheets for speed. Use cascading to combine linked, alternate, and imported style sheets to layer your presentation for older browsers and alternate media (print), and to save bandwidth.
• Group selectors with the same declarations and declarations with the same selectors.
• Use simple selectors high in the document tree to set global and element-wide styles (that is, type styles like body, h1, p, and dt).
• Use descendant selectors to get specific without class or id selectors.
• Take advantage of your inheritance - don't overspecify CSS; let it flow down the document tree.
• Use multiple classes to group common style declarations to save space.
• Use value replication on the border, padding, and margin properties.
• Use shorthand hex colors (such as #00f).
• Use shorthand properties to optimize your CSS (including font, background, margin, and border).
• Use short class and id names.
• Use shorthand hexadecimal colors or names, whichever is shorter.
• Use relative lengths for maximum flexibility.
• Remove whitespace.
• Cut the comments.

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 Support Charts

Eric Meyer. The master CSS reference grid.

Copyright © 2002-2008 Website Optimization, LLC - Free website speed test - Privacy Policy
Last modified: June 19, 2004