Call to designers: Single-line or multi-line CSS?
Here’s a post that’s actually a well-hidden designers’ poll.
You people, coding your beautiful CSS out there, what is your style?
Single-line or multi-line?
I tend to use multi-line all the time because of work, but never cease to consider it a huge waste of space and bytes. It’s easier to tell apart the different rule properties, but you pay for it with scroll, scroll, scroll.
Single-line on the other hand makes shorter and sweeter CSS, but it’s more difficult to tell apart the different properties. On a positive note though, it’s really easy to scan through the file and find the rule you want, always a plus.
So it’s a tie? Who’s winning? What do you use?
P.S. Do not forget! For those out there working on Textmate (or having access to it anyway), there’s this great script from Dan Rubin that converts your single-lines to multi-lines in a sec, using the powers of regexp!
September 10th, 2008 at 8:29 am
Multiline of course.
I can’t stop wondering how people *can* write code (any type of code) in a single line.
September 10th, 2008 at 9:09 am
Single line rulez…
;) 
I’m used to it so I don’t have a problem.
September 10th, 2008 at 9:53 am
I also use the multi-line approach although many gurus are switching to single-line… Currently, I’m not thinking to switch, but you never know
September 10th, 2008 at 10:13 am
As a novice “designer” I use multi-line, but, after all, I think that CSS is not that hard to need to avoid the single approach.
September 10th, 2008 at 10:28 am
Multiline all the way. It just makes sense.
September 10th, 2008 at 10:32 am
Multi-line for dev, compress to single-line for release.
Then uncompress if big changes are needed with DW format code and re-compress.
September 10th, 2008 at 11:10 am
I use both. Multi-line for rules that have multiple properties, but only single line for rules with one property. I clearly comment the different sections in my stylesheet which allows for easier (scroll) browsing.
September 10th, 2008 at 2:16 pm
IfI use more than four css properties it’s multiline. Otherwise single-line.
Seems easier for me to read a single-line.
September 10th, 2008 at 6:01 pm
I tend to agree with acidsmile:
It’s good to be able to quickly make out and change a property during development, but upon launch, when you only wanna do some edits here and there, single-line saves bandwidth and time scrolling.
September 11th, 2008 at 11:56 am
I use multi-line all the way. I also tend to indent nested classes/id’s. As for production sites, I sometimes get rid of all non-vital spaces and junk.
My own webdev framework I’m working on will eventually automatically clean up and compress CSS, JS, and maybe even HTML for when the framework is running in a production environment.
September 11th, 2008 at 12:50 pm
+1 for acidesmile. Also keeping the properties in alphabetical order helps a lot during development.
September 11th, 2008 at 1:45 pm
Multiline of course, It’s more readable. And if the code is readable, no comments are needed!
September 16th, 2008 at 6:06 pm
single line !
it’s just css , not some wierd c++ algos lol.
1) I just hate to use the scroll bar each time i want to modify a property.
2)multi line is a waste of bytes, of time , and contributing to global warming.
but i agree that multi line is propably easier when someone is starting web design.
++
September 17th, 2008 at 3:53 am
Why stress yourself ? Most web app platforms and frameworks compress both css and javascript before sending it. Works this way for .net jsp most python stuff and RoR (not certain about the last one)
September 17th, 2008 at 8:49 am
@KCorax
We’re talking development here, not deploy.
Most often than not, CSS is not monolithic - it usually evolves with the project and needs quite a lot of editing.
And most web designers code their CSS by hand, anyway, not in some obscure CSS-generating app.
September 17th, 2008 at 12:09 pm
@sugar Sure that’s what I’m talking about. But for most platforms, either by hand or using some server mod, when the user tries to access a .css or .js file that gets compressed on demand. Look here for example this http://ub0.cc/3Y/0c in my blog isn’t really compressed. It’s a huge file with comments and so on. Compression is done on demand when a client requests it and cached for some hours at a time.
September 17th, 2008 at 1:03 pm
@KCorax
And your point is?
September 17th, 2008 at 1:53 pm
@sugar My point is that you can write your CSS however you want without worrying for waste of bytes. Just flip that flag in Apache somewhere.
Aah it could all be solved if we had an xml representation for CSS.
September 22nd, 2008 at 1:20 am
Single-line FTW!!!
Why use multiple lines? You ll have to scroll forever.
With Single-line CSS, I have everything in front of me.(24″ Wide monitor) Fast, tidy and Easy!
October 10th, 2008 at 9:59 pm
I just wrote a tool that converts between the two formats:
http://www.newmediacampaigns.com/page/single-line-vs-multi-line-css-a-tool-to-end-the-debate