Quick Tips: CSS Shorthand Properties

What type of CSS developer are you? Shorthand or Not a Shorthand type? Writing CSS using either can create a long debate on how to build and maintain CSS files. For some people writing property:value1 value2 value3; is easier and faster to code than using all the properties.

I don't want to start a debate here but here's why I think the shorthand is better to use. With the shorthand you can set several properties at once on a single declaration line. This will avoid lots of head aches if you have to debug your CSS. Not only it is easy to write, read and maintain but also reduce the file size. If your CSS is big, you will end-up saving lots of kilobytes of data transfer on a high traffic website.

Let's see some examples:

background

A shorthand syntax of the background can define as follows:

background: #ddd url('sample.jpg') no-repeat top center fixed;

instead of:

background-color: #ddd;
background-image: url('sample.jpg');
background-repeat: no-repeat;
background-position: top center;
background-attachment: fixed;

Borders

A shorthand syntax of the border can define as follows:

border: 1px dotted #ddd;

instead of:

border-width: 1px;
border-style: dotted;
border-color: #ddd;

Similarly, the syntax applies to the border width (top, right, bottom and left) and can be defined like this:

border-width: 1em 1.5em 2em 2.5em;

instead of:

border-top-width: 1em;
border-right-width: 1.5em;
border-bottom-width: 2em;
border-left-width: 2.5em;

There's many more tags you can use the shorthand declaration (like font, margin, padding, transition) and I am not going to go through all of them, you get the idea.

One more reason why I prefer the shorthand declaration: CSS3. Some new CSS3 tags don't have multiples declaration, like text-shadow.

For example, the text-shadow is defined as:

text-shadow: h-shadow v-shadow blur color;

But where are the text-shadow-h-shadow, text-shadow-v-shadow, text-shadow-blur, text-shadow-color?

So why not make your code standard and use the shorthand everywhere?