Efficient CSS Shorthand

Roger Johansson has been working with Web Standards long enough to fully understand the importances of coding efficiency. He shares some of his tips: “Shorthand properties can be used to set several properties at once, in a single declaration, instead of using a separate declaration for each individual property. As you’ll see, this can save a lot of space in your CSS file.

Quite a few shorthand properties are available – for details I suggest the W3C CSS specifications of the background, border, border-color, border-style, border sides (border-top, border-right, border-bottom, border-left), border-width, font, list-style, margin, outline, and padding properties.
Colours

The most common way of specifying a colour in CSS is to use hexadecimal notation: an octothorpe (#) followed by six digits. You can also use keywords and RBG notation, but I always use hexadecimal. One great shortcut that many don’t know about is that when a colour consists of three pairs of hexadecimal digits, you can omit one digit from each pair:

#000000 becomes #000, #336699 becomes #369.
Box dimensions

The properties that affect box dimensions share the same syntax: the shorthand property followed by one to four space separated values:

* property:value1;
* property:value1 value2;
* property:value1 value2 value3;
* property:value1 value2 value3 value4;

Which sides of the box the values affect depends on how many values you specify. Here’s how it works:

* One value: all sides
* Two values: top and bottom, right and left
* Three values: top, right and left, bottom
* Four values: top, right, bottom, left”

Read the full article at 456 Berea St and prepare to be informed.