Website Optimization

Chapter 7. CSS Optimization

Cascading Style Sheet (CSS) optimization transforms your HTML by abstracting inline style and behavior into minimal stylesheets. Whereas CSS makes a site easier to maintain, CSS optimization makes it load faster and makes it more search engine-friendly.

In this chapter, you’ll learn how to shrink your stylesheets and HTML at the same time. CSS-specific techniques include (1) grouping declarations and selectors, (2) merging common styles into shared classes, (3) inheritance, (4) abbreviating with shorthand properties, and (5) abbreviating class and ID names. HTML-oriented techniques include replacing JavaScript behavior with CSS, designing markup for descendant selectors, and CSS layout. By combining these techniques, you can reduce HTML and CSS file sizes by up to 50%, according to Jeffrey Zeldman’s Designing with Web Standards (Peachpit Press). When you plan your site in this way, you are giving it what we call CSS architecture.

Build on a CSS Architecture

Good CSS architecture involves planning from the very beginning for CSS layout, style, and behavior. This way you can avoid most of the limitations and browser quirks that creep into an unorganized CSS layout.

To create a solid CSS architecture, use the following techniques:

• Use a reset stylesheet to equalize rendering behavior.

• Plan for descendant selectors by using labeled container cells for main page sections (masthead, navigation, content, footer, and side columns).

• Position external CSS files in the ...