CSS Shorthand – A Guide to Cleaner and Faster Coding

A Guide to Cleaner and Faster Coding

As a web developer I am always looking for ways to speed up my workflow. One of the simplest ways to speed up and clean up your coding is to learn CSS Shorthand. In order to fully grasp shorthand, it is helpful to already have a decent knowledge of CSS. I have put together a simple guide to bring you into the world of CSS Shorthand.

CSS Syntax – The Basics

The basic CSS syntax contains a minimum of three parts, a selector, a property and a value

/* Basic Syntax */

selector { property: value }

/* Actual Example */

p { color: #444444; }

Background Property – The Long Way

There are five properties for the background property, but coding all these out separately is a waste of time and space.

#example {
      background-color: #cccccc;      
      background-image: url(logo.png);
      background-repeat: no-repeat;
      background-position: 10px 10px;
      background-attachment: scroll;
}

Background Property – The Short Way

Combining the five properties into one declaration will speed up your code and it will take up less space in your stylesheet.

#example { background: #ccc url(logo.png) no-repeat 0px 0px fixed; }

Border Property – The Long Way

There are three properties for the border property which consist of the width of the border, the style and the color.

#example {
      border-width: 2px;
      border-style: solid;
      border-color: #333;
}

Border Property – The Short Way

Combining these three attributes is one of the easiest to remember in my opinion, and since I use a lot of borders it saves me a lot of valuable time.

#example {
      border: 1px solid #333;
}

Margin and Padding – The Long Way

Margin and padding have four possible properties each.

/* Margin Example */

#example {
      margin-top: 5px;
      margin-right: 10px;
      margin-bottom: 10px;
      margin-left: 5px
}

/* Padding Example */

#example {
      padding-top: 5px;
      padding-right: 10px;
      padding-bottom: 10px;
      padding-left: 5px
}

Margin and Padding – The Short Way

It is easy to use shorthand for margin and padding. All you have to remember is think clockwise just like a clock. Start with top, then the right, then the bottom, and lastly the left.

/* Margin Example */

#example {
      margin: 5px 10px 10px 5px;
}

/* Padding Example */

#example {
      padding: 5px 10px 10px 5px;
}

There is another way that padding and margin can be written and that is with just two values, the first value being top and bottom, and the second value being left and right.

/* Margin Example */

#example {
      margin: 20px 0px;
}

/* Padding Example */

#example {
      padding: 10px 20px;
}

Colors in General

Throughout this tutorial I have been been short handing the color property (I wonder if you noticed) and here is the correct syntax for that. Any color values such as #333333 (dark gray), can be abbreviated to #333, because all of the values are the same. If a value reads something like #2bb7da it cannot be abbreviated. Of course this is not a huge deal but when dealing with a big project every second counts.

/* Long Example */

color: #333333


/* Short Example */

color: #333;

That’s All Folks

Hopefully this guide has been helpful to you and will continue to be helpful in the future. I will be sure to update this article as technology changes and CSS3 ushers it’s way into the foreground! By the way subscribe, retweet, digg, stumble, or bump if you enjoyed this guide!

Written by Shane Jeffers

Shane Jeffers is the Creator and Author of Three Styles. I have a unique passion for design trends and tutorials. Follow me on twitter @ThreeStyles