shorthand css/not only because it is shorter
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.
Arrgggg. I couldn't disagree more.
I've been programming over 40 years and have gone through numerous methods of how to organize code. My conclusion -- one statement, one line.
Use white space liberally to make your work readable -- as such, you can spot errors much easier.
While you can use one line with multiple rules (i.e., margin: 1em, 0, 0, 1em) -- don't. It makes it much easier, at least to me, to see what's going on. YMMV.
Cheers,
tedd
Hmmm, I'm afraid you're missing most of my point. This article is not about how to structure your css file, it's about the relations that can be forced between css declarations using shorthand css.
That said, I'm afraid I still don't agree with your point. My css files often exceed 1000 lines and I hate scrolling through them. And that's with all declarations per selector on 1 line. Can't imagine putting them each on a separate line really.
I don't see the argument in your first example how 1.3 is more prone to errors.
"If we've used the third declaration, we need to start rewriting our css to match the first declaration." Don't see this argument either. When you change the value of the margin, what does it matter if you have to change "margin:1em;" as oppose to "margin:1em 1em 1em 1em;" ?
Well, it's a lot easier to simply change values than to rearrange your css. It's only a detail of course, but I've just finished two days of cleaning up a css file (that wasn't mine) and you see how quickly these things become a downright mess.
Example 1.3 is great if all margins should remain the same. You only need to adapt one single value and that's it. But if this is not the case people will need to rewrite this statement to match example 1.1, which leaves more space for errors and typos. Especially when these changes are quick tests and you're dealing with people who aren't too trained in the ways of css.
You should consider your css as a template for others to work with. The only thing they should do is adapt values, not rewrite css. I know these are just tiny details, but over a css file of 1000+ lines this can make a serious impact.
For what it's worth, I agree with your methods. I utilize all of them regularly. I find the methods are practical and effective. You should shorten up your colors, though, ie. 000 fff
All feedback is worth something, so thanks for replying :)
And I like your remark about the colors, although I've been fighting that for a while. I've never really linked it to this article, and it actually makes good sense to do so (if the same parameters as described in the article are met).
I think this is a great article and do use this principle througout my coding and believe shortening colors is a good idea, recently I have found that some of the browser revisions don't truly represent all of the "short hex" colors correctly, could be down to monitors, resolutions etc but worth watching out for! :) My tuppence...
I am a regular reader of this site. I used to read all the articles as all of them are helpful for me as I am also a web designer. I like studying more and more about web designing and internet is my teacher. This is very useful information for me. I too have heard about this shorthand css but this is the first time I am hearing about its details. I really liked it and decided to test it soon. If I like it even after the testing I will surely use shorthand css for working as it has many advantages such as it hints at relations between separate values and reduces the chance of errors
* required fields