shorthand css
css is tricky, no doubt about that. And when working on a big site, keeping a clean css file is pretty hard to manage. Time constraints, browser bugs and change requests can make a downright mess of your nicely tailored css. As time passes, things will only get worse. That's why it is important to keep your css as clean as possible from the start. Structure it well and remove unnecessary declarations as they will only confuse people later on.
But there's another powerful way to keep your css clean. If you make good use of shorthand css declarations, you'll make future changes to the css file easier and you'll lower the chance of messy css, forgetfulness and mistakes. This article will try to reveal the finer points of using shorthand css.
shorthands
css shorthands are a way to group several linked css declarations into one declaration. Most commonly used are the border, margin, padding, font and background shorthands. The obvious advantage is of course that your css file will become smaller and/or shorter, but there is a lot more to using shorthands. This is probably best explained through some examples.
when 4 become 1
1.1/ p {margin:1em 1em 1em 1em;} 1.2/ p {margin:1em 1em;} 1.3/ p {margin:1em;} Consider the three declarations above. They all have the exact same effect, and yet there are important differences between these declarations.
The true power of shorthand css reveals itself when css declarations need to be changed. While the third declaration is obviously the shortest, it assumes an equality between all four margins. If this equality isn't intended but merely a coincidence, adapting the css later on will lead to unneeded difficulties.
What if tomorrow our designer tells us that the margin on the p element needs be changed to 1em 0.5em 2em 0.25em? If we've used the third declaration, we need to start rewriting our css to match the first declaration. Not only can this lead to easy typos, when the css file is passed to others and they have to change the value it will be prone to errors.
It's always important to keep the design in mind when you're writing your css. For example, the second statement implies a dependency between the top-bottom and left-right margins. You can't change the values separately, which should be an indication that they shouldn't be changed separately either.
resetting values
1.1/ p {margin:1em 1em 1em 0em;} 1.2/ p {margin:1em; margin-left:0em;} Another interesting example of shorthand css is the reset of values. In the example above the left margin is reset to zero. Whatever the other values are, this reset will remain the same. To accomplish this, the second declaration gives us the best results. Notice how it's not really shorter at all, but instead of changing three values we only need to change one value.
This is second important guideline in using shorthand. If you only need to change one value, there's a smaller chance of forgetting to change other values that need to be changed too, often leading to very unwanted effects.
reusing declarations
1/ p {border:1px solid #000000} 2.1/ p.inverse {border-color:#ffffff;} 2.2/ p.inverse {border:1px solid #ffffff;} Of course, css shorthands can be abused too. If you look at the example above, you'll see that in line 2.2 the whole border declaration is repeated while only the color of the border needs to be changed (2.1). If you misuse shorthands like this you're actually increasing the number of values that should be changed together, making the css harder to adapt later on.
A bad habit that will lead to errors and unnecessary work.
use em ... well
When used correctly, shorthand css can be much more than a byte-saver. It hints at relations between separate values, it reduces the chance of errors when css needs to be adapted and it helps to protect others from messing up the css file because they aren't aware of the entire scope of a change request.
Just remember that when used badly, css shorthands will only clutter the css. So use em, but use em well.