Writing Efficient CSS

By: John Gallant , Holly Bergevin ,

Page 1 of 3

Set for printing


This article is intended for people familiar with CSS syntax and usage. If you are new to CSS, see Adrian Senior's excellent article, CSS: An Introduction, in the articles section of CMX.

The Benefits of Efficiency

One of the touted benefits of CSS is that it reduces total page weight, and thus download time, both at first page load, and even more on subsequent loads due to style sheet caching. This is true, but often a sizable fraction of the first load savings is lost because of highly redundant CSS code.

Well that's all over. Now you will learn some "secrets" of efficient CSS coding, enabling you to pare that style sheet right down to the bare bones. To be sure, you won't achieve huge savings doing this, but for some highly competitive sites every little bit counts.

There are several areas where byte-busting can happen, including shorthand properties, multiple declarations, default values, inheritance, and white space.

Shorthand Properties

A couple of the CSS shorthand properties have been touched on in Zeroing page margins, but there's a lot more to be said about the subject.

Commonly used shorthand properties include:

  • font (controls "font-size", "font-weight", "line-height", etc.)
  • background (controls element backgrounds, placement, repeating, etc.)
  • list-style (sets the properties of the list item "bullet")
  • margin (defines the width of margins on the sides of a box)
  • border (defines properties for the borders on a box - there are several shorthand properties involving borders)
  • padding (defines the width of padding within the sides of a box)

The list items above are linked to relevant parts of the W3C CSS 2 specifications.

For example, the  font  property is a shorthand property for setting font-style, font-variant, font-weight, font-size, line-height, and font-family all at once. Not all of them must be used within the shorthand property, however. When values are omitted from a shorthand form, each "missing" property is assigned its initial value, such as these found in the W3C specifications for the  font property . If many of the font-related properties are being controlled, use of this property can cut a substantial number of bytes from a style sheet.

The  background  and  list-style  properties work in a similar way. The remaining shorthand properties in our list involve the four sides of a CSS box and are somewhat different than the others.

Box Side Shorthand Properties

The four sides of any block level element (divs, tables, lists, paragraphs, etc.) may each have margins, borders, and padding, in varying widths set individually for each side. In the case of borders,  border-style  and  border-color  may also be apportioned separately for each side. If all these properties are explicitly spelled out, a rule set can get quite lengthy. Using shorthand rules makes it possible to drastically reduce the load.

The "Clock"

When one of these "box-side" properties is required and all sides are to be the same, just use the basic shorthand property like so:

margin: 5px;
border-width: 5px;
padding: 5px;

Note:  border-style  must also be set in order for borders to show. This can be done by using the  border-style  property, or by setting a style with the  border  property. Using  border-width  alone will result in no borders being displayed.

If, however, some sides need different values, a CSS feature we call the "clock" comes into play. Just imagine a box as the face of a clock. When the hands are straight up, they point to the top of the box. This is the first shorthand value given. Next comes the 3 o'clock position, which is the right side of the box. Then 6 o'clock is the box bottom, and finally the 9 o'clock position indicates the left side.

Let's look at an example. On our page we want a box with a 10px top margin, a 5px right margin, a 3px bottom margin, and no left margin at all. Here's how the  margin  shorthand property would be written:

margin: 10px 5px 3px 0;

In the property declaration, these values must be separated by spaces, and only spaces. Also, some unit of measurement must be given for each value unless the value is zero.

Note that the zero sized margin is defined as  0 , because when any value is zero it doesn't matter what unit you use. A zero amount of any unit (px, em, %, etc.) is equal to a zero amount of any other unit.

Page 1 of 3 1 2 3 Next

Download Support Files

CSS, cascading style sheets, shorthand property, shorthand properties, default values, selectors, inheritance, font, margin, border, padding, list-style, background, border-width, property, properties.