YOUNG DELTA HEART

Viva multi-line CSS declarations!

For our latest project at FreeRange we've been handed a few dozen stylesheet updates from an external designer, which means we've had to merge those updates into the work we have been doing. One interesting thing we encountered through this process with a designer whom has a penchant for single line style declarations, is that it makes hard work of collaborative style management™.

Now this article is somewhat acute in perspective, your company may well have an in-house style that features one line CSS declarations, or you may just plain love them, hell I know a few friends who work in that way, so I don't begrudge if that works in your remit, but when you are working across multiple teams you may need to consider a few different factors.

One line vs multi-line declarations.

For arguments sake, lets assume there are two potential ways to format your CSS, here is a random declaration from this very site laid out as a single line, and then again over multiple.

Writing style declarations on one line has never made sense to me, I find them confusing to read and generally unpleasant to work with, however there are long fought, apparently valid, arguments for the former style but there is one downside that makes me think all of that should be tossed in the bin:

Stylesheets that have declarations grouped onto one line, are impossible to diff!

Why is this important?

In this instance it revolves around version managment, and if you don't even do that you should wake up and start, I cannot think of a single reason why in this day and age you wouldn't be, next thing you will tell me you still deploy your websites with FTP. Haha.

By version manage I mean something like (hopefully) git, or subversion (dropbox could work to some extent).

We all know that one of the advantages of version management is being able to look at two snapshots of a single file during the lifetime of development, and if you version manage well you should have fairly regular commits to draw from for your comparison.

Usually to compare these two files you would use a tool such as diff, which will usefully and (if you use the right editor) beautifully mark the differences between the file(version)s into an easily digestible format allowing you to make correct assumptions and intelligent changes as needed.

Now imagine you are working in a team with 3 or 4 people writing CSS into single file, each committing changes to their local copies before merging. When you come to do said merge you may need to resolve version conflicts, and using a tool like diff will help you to do this painlessly and quickly.

If you have declarations that are all on one line, you cannot diff effectively as the changes are not clearly marked.

You have to manually scan across the entire line of declarations as diff will just mark the entire line as being changed, and doing this across a few hundred lines of potential changes means you may as well just look at the stylesheet line by line to work out what has been altered! Something as simple as dropping your declarations onto a line each would prevent the need to practice such methods prone to error.

Please, if you are going to be writing CSS to send to others to integrate, please try to place each declaration on it's own line, it will be most appreciated. Maybe you will start to see the joy of diff in your own workflow and you will get two prizes for the cost of one.

Alternately you could use a syntax specific CSS tool such as SASS to keep your development CSS in a rigid structure and set the output to create one line declarations so you get the best of both methods.