I believe Jeffrey Way has a quote somewhere that goes like, "think about the developer who can save a couple seconds on a task. At the end of the year he will have accomplished that much more than the developer who didn't". If you have begun to streamline your process learning shorthand css is one method for increasing efficiency.

1. Background

A staple of every web developer's css tool kit. 99% of websites will require the use of this property, making it an excellent way to reduce time on task. I seem to use this type of shorthand whenever I am using a sprites image file.

background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position];
.bg {
     background: #323232 url(../images/layout/sprites.png) no-repeat scroll 10px 20px;
}

2. Font

Probably my favorite css shorthand property. Combines everything you need to style a font. Super quick and concise format. The only thing it doesn't include is letter-spacing.

font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];
p {
     font: italic small-caps 600 12px/23px "SophiaProLight", Verdana, sans-serif;
}

3. Margin / Padding

A truly tricky shorthand property. This is one I still get mixed up.

The format goes as such: margin-top margin-right margin-bottom margin-left. If you think about the short hand like the face of a clock and imagine the clock starting at 12 this becomes a whole lot easier.

However, there are three additional short hand properties. For all sides at once you just specify one measurement (margin: 15px). For the same measurement on top / bottom and right / left you specify just two measurements starting with the top / bottom (padding: 7px 5px).

And now for the tricky one. If your left / right sides are the same measurement but the top / bottom are different you specify top measurment, followed by the joint left / right measurement, and finish with the bottom measurement (margin: 10px 20px 13px). Check the example below as I have shown with code all methods.

margin: [margin-top] [margin-right] [margin-bottom] [margin-left];
p {
    /* Top Right Bottom Left */
    margin: 7px 10px 13px 5px;

    /* Top & Bottom  Left & Right */
    padding: 7px 5px;
}

em {
     /* Top Right & Left Bottom */
     margin: 10px 20px 13px;

     /* All four sides */
     padding: 15px;
}

4. Border

Similar to the margin / padding shorthand, you can declare all sides of a border with one declaration. However, unlike margin / padding this is the only format for the border shorthand.  Addtionally, properties such as border-width, border-style, and border-color can be combined into a single line.

border: [border-width] [border-style] [border-color];
div {
     border: 1px solid red;
}

5. List

This is lesser used shorthand property for styling ordered and unordered lists.

list-style: [list-style-type] [list-style-position] [list-style-image];
list-style: disc inside url(bullet.gif);

Box Shadow

While this is not a shorthand property, box-shadow's default format is very akin to earlier css shorthand properties.

box-shadow: [horizontal-length] [vertical-length] [blur] [spread] [color] [inset]
box-shadow:  2px 2px 3px 0px rgba(172, 17, 19, 0.69);

Join the conversation

comments powered by Disqus