Page 1 of 3 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.
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.
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:
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.
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.
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.
Keywords
CSS, cascading style sheets, shorthand property, shorthand properties, default values, selectors, inheritance, font, margin, border, padding, list-style, background, border-width, property, properties.
