Best practices for keeping CSS files light

On the web, every byte counts. As we shift our presentation from markup to external CSS files, it’s still imperitive to keep the size of these files small. This post introduces and explains CSS shorthand properties (such as font) that can be used to define related style properties (such as font-family, font-size and font-weight as a single property, and save a few bytes each time. I’ll also cover shorthand for certain property values (such as colors), and discuss other strategies and best practices around keeping the weight of the stylesheets light.

CSS terminology

Before proceeding, it’s useful to ensure we’re on the same page in terms of definitions. So, consider the following CSS rule:

1. h4
2. {
3. background-color: #000;
4. color: #fff;
5. font-size: 125%;
6. }
7. Download this code: /code/css_light_01.css

When I talk about CSS, I will refer to the following terminology:

• Rule – the grouping of everything associated with a selector, including the selector itself. The above example is a complete rule.
• Selector – a targeted identification of the HTML that the styles we’re defining apply to. In the above example, h4 is the selector.
• Declaration – the grouping of the property and the value assigned to it. In the above example, color: #fff; is a declaration.
• Property – a specific style property that we wish to set. In the above example, background-color is a property, as is color and font-size.
• Value – the value that we’re setting the property to. In the above example, the value for the color property is #fff.

Shorthand CSS properties

There are several shorthand properties available for use. In general, it’s better to use the shorthand version of the properties, when possible, because doing so helps conserve file size and bandwidth. For example, instead of this:

1. #header
2. {
3. padding-top: 1px;
4. padding-right: 2px;
5. padding-bottom: 3px;
6. padding-left: 4px;
7. }
8. Download this code: /code/css_light_02.css

Do this:

1. #header
2. {
3. padding: 1px 2px 3px 4px;
4. }
5. Download this code: /code/css_light_03.css

Note: this may not always be possible or efficient. For example, in a case where you’re overriding padding-left but don’t necessarily know the calculated padding of the other sides. It’s best to be explicit and use the longhand property in such cases. Here are the shorthand properties, and the proper format for their values:

• background: background-color | background-image | background-repeat | background-attachment | background-position
• border [and border-top, border-right, border-bottom, border-left]: border-width | border-style | color
• font: font-style | font-variant | font-weight | font-size | line-height | font-family
• list-style: list-style-type | list-style-position | list-style-image
• margin: margin-top | margin-right | margin-bottom | margin-left
• padding: padding-top | padding-right | padding-bottom | padding-left

Shorter-Than-Shorthand Properties

For margin and padding, there is even a shorter approach that is possible in two circumstances.

When setting the top, right, bottom and left properties to the same value, you can avoid the repetition and weight by writing margin: 5px; or padding: 3px;.

When setting the top and bottom properties to the same value and also setting the right and leftproperties to the same value, you can avoid the repetition and weight by writing margin: 5px 10px; or padding: 3px 6px;, where the first value sets the top and bottom properties, and the second value sets the left and right.

Shorthand CSS values

In the following cases, shorthand values can also be used to further save weight.

Shorthand color values

When defining foreground and background colors hexadecimally, the red, green and blue hex values can be compressed from two characters to one, provided that they are the same character, and provided that this applies to all three (red, green, blue) hex values. So, for example, color: #ffcc33; can be written in shorthand as color: #fc3;. However, this cannot work for color: #f0c030 because the red(f0), green(c0) and blue(30) values do not use the same character. The only time this shorthand cannot be used is when any one (or more) of the values (red, green or blue) does not use the same character.
Sidenote: this was one benefit to the web safety palette, but the use of the safety palette has decreased as monitors with greater color-depth have become more dominant on the Internet.

Other Space-saving Strategies

Use Relative Paths when possible

When pointing to supporting files such as background images, use relative paths when possible, but keep in mind that URL’s in stylesheets are relative to the stylesheet, not the HTML document.

Zero is a Loner

When setting a property that defines a unit of measurement to 0, do not specify the unit of measurement. Zero is always Zero, by itself, regardless of the unit of measurement. In all other cases (greater than or less than 0), always specify the unit of measurement. In other words, favor padding: 0; over padding: 0px;.

Note: when defining values between 1 and 0, place a zero before the decimal point. For example, some browsers interpret font-size: .9em; differently than font-size: 0.9em;.

Avoid repeating selectors

It doesn’t take long for a CSS file to grow, and one common cause of bloat is repeated selectors. Review your styles as you go, and consolidate repeated selectors when possible.

Next post (newer)

A standard MSN homepage, part I: valid XHTML 1.0 Transitional

Previous post (older)

Marking up definition lists