Quick Tips: CSS Shorthand Properties
Posted on Wednesday June 27, 2012 by Eric Potvin
What type of CSS developer are you?
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 will end-up saving lots of kilobytes of data transfer on a high traffic website.
Let's see some examples:
A shorthand syntax of the background can define as follow:
background: #ddd url('sample.jpg') no-repeat top center fixed;
background-color: #ddd; background-image: url('sample.jpg'); background-repeat: no-repeat; background-position: top center; background-attachment: fixed;
A shorthand syntax of the border can define as follow:
border: 1px dotted #ddd;
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;
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
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 of the new CSS3 tags don't have multiples declaration, like
For example, the text-shadow is defined as:
text-shadow: h-shadow v-shadow blur color;
But where are the
So why not make your code standard and use the shorthand everywhere?