When people argue over how to organize their CSS, the debate usually comes down to two approaches: multi-line vs. single-line. Obviously both have their benefits and drawbacks, but they aren’t the only two viable options. One technique I’ve been using more and more recently is a combination of the two styles.
For lack of a fancy name I just call it multi-single-line CSS. The premise is pretty simple: maintain the legibility of multi-line CSS while shortening total file length. The way it works is that you group similar attributes (for example width and height) onto a single line. In doing so, you’re saving space while making connections between attributes that are often referenced together.
As you can see, it’s a nice middle ground between long and short. Here are a couple more examples pulled from my CSS file:
Hopefully you find it useful, and if you have any suggestions to make it better I’d love to hear ‘em!
The Discussion
Hi there. I think this idea is definitely an intriguing one. Personally what I’ve always done is to write my CSS with multiple lines, then, once I’m all done with the styles, collapse it into single-line CSS. This way I can keep organized while working and then bring down the file size for launch. Unfortunately this makes it hard to edit the styles after the fact.
Good idea if you like mult-line CSS. I’m still a big fan of largely indented single-line CSS though. Here’s how my CSS looks like.
http://designinformer.com/wp-content/themes/design-informer-v2/style.css
I love it! I have always been frustrated by the crazy CSS lines and you spend 8 hours looking for what you need. I like the categorization here… nice!
@di
That is a very neat stylesheet!
Just out of curiosity: What does your CSS look like in your editor? Don’t those huge indents and long lines cause breaks? or do you edit in a window 1400px wide? Personally, I can’t stand unintentional line breaks, so single-line has never worked for me.
That’s odd. Just today I (re-)started a project, and I coded my CSS in a very similar way. The one difference is that I don’t put more than three attributes in a single line — position-top-left go in one line, width-height in the next, and then margin-padding.
I used to code single-line, but I switched to multiple-line when I had to edit a stylesheet written in that format. I see the advantages, but all those lines and all that scrolling can be exasperating.
@meilinPR
Yeah I don’t follow the examples above strictly. It really depends on the implementation. Depending on how the padding is used I might group it with width/height or with margin. Sometimes color and background-color get grouped and other times its color and font. It’s all about which ones it relates to more for each situation.
I guess single vs. multi really is a question of whether you prefer more line breaks or more scrolling. I for one find scrolling less painful.
I have recently started to use Sass (http://sass-lang.com/) to produce my CSS, which also encourages indentation and shortens the amount of CSS you need to write.
I’ve been doing this some as well. One the issue of line-breaks vs. scrolling, TextMate’s soft-wrap toggle makes it easy to alternate between behaviors as needed. It’d be cool if someone built a plugin that allowed you to truly toggle between views.