10 CSS Shorthand Code Tips

For anyone who has been coding websites for years, CSS can get quite monotonous. Sure, you can cut a few corners by copying and pasting (which is a big trick in HTML too), but there are also other ways to decrease the monotony, while increasing productivity. This is through shorthand CSS coding, which enables the developer to speed up their work and enable them to focus on the creative work.

And so, apply any or all of these 10 CSS shorthand code tips to speed up your productivity, and greatly improve your efficiency; not to mention, greatly reduce the size of your CSS file. These tips are among the most frequently used commands.

1. Colors

Colors are normally written in hexadecimal format, eg #000000 is the hex code for black, #FFFFFF is for white. However, a quicker way of representing these two colors is to drop one half of the pair, thus: #000 is black and #FFF is white. If you had a color represented by #3366FF, you could write this as #36F.

2. Box Dimensions

When dealing with boxes, it can often be easy to forget which value refers to which side. Basically, start from the top, go right, bottom and finish left. Think of the word TRouBLe to jog your memory. This isn’t specifically a code shortcut, but it is great to remember where the values start.

4. Borders

You can specify all border properties for each side of a border all in one line. This includes thickness, style and color. For example:

.box {
border-top: 1px solid #FFF;
}

Is far easier than presenting that information on three different lines. This can be applied to right, bottom and left borders too.

5. Background

The background commands can get very messy, but these too can be condensed into one line. Instead of having background-color, background-image and so on all on separate lines, you can simply specify all your background information on one line, thus:

.box {
background:#000 url(background.gif) no-repeat fixed 0 0;
}

6. Fonts

Fonts can be presented in the same syntax manner as background. Instead of line after line of font information, simply specify all your font information in one line, thus:

7. Lists

Again, there is a shorthand command for lists, which greatly increases productivity.

list-style: square inside url(image)

This can be used instead of three separate lines.

8. Grouping Selectors

You can also apply these condensing methods to such things as header tags, to enable you to speed up their formatting. For example, instead of listing each header with their various values, you can actually take what is common to each, and declare those values together.

These are all amongst the most important and most commonly used elements of CSS that can be shortened. Not all elements can be shortened, so if you are in any doubt, then check first, else you may have problems with your code.

These 10 CSS shorthand code tips will greatly increase your work speed and create a smaller, easier to read and more optimized CSS file. Remember also to leave plenty of white space in your CSS files and space things out uniformly and consistently. This helps you to read through the file to make any new changes you wish to make at a later date.