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!
22 comments on this post
porcupine #1
10.Sep.08
Multiline of course.
I can’t stop wondering how people *can* write code (any type of code) in a single line.
Dimitris Giotas #2
10.Sep.08
Single line rulez…
I’m used to it so I don’t have a problem.
John Tsevdos #3
10.Sep.08
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
george tziralis #4
10.Sep.08
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.
Gerasimos #5
10.Sep.08
Multiline all the way. It just makes sense.
acidsmile #6
10.Sep.08
Multi-line for dev, compress to single-line for release.
Then uncompress if big changes are needed with DW format code and re-compress.
Sam Brown #7
10.Sep.08
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.
Harris #8
10.Sep.08
IfI use more than four css properties it’s multiline. Otherwise single-line.
Seems easier for me to read a single-line.
Sugar #9
10.Sep.08
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.
jimeh #10
10.Sep.08
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.
Giannis T. #11
10.Sep.08
+1 for acidesmile. Also keeping the properties in alphabetical order helps a lot during development.
Konstantinos Kouratoras #12
10.Sep.08
Multiline of course, It’s more readable. And if the code is readable, no comments are needed!
lunatik #13
10.Sep.08
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.
++
KCorax #14
10.Sep.08
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)
Sugar #15
10.Sep.08
@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.
KCorax #16
10.Sep.08
@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.
Sugar #17
10.Sep.08
@KCorax
And your point is?
KCorax #18
10.Sep.08
@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.
lexx #19
10.Sep.08
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!
Joel #20
10.Sep.08
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
» Introducing: Compact Multi-line CSS! - sugarenia.com : Web Standards, Accessibility & other Girly Stuff #2110.Sep.08
[...] CSS for relatively large projects is the way you structure it. We’ve already discussed single-line or multi-line in this blog, plus the way you define sections and so-called variables in your CSS are already [...]
7pm Tech Code Snippets #2210.Sep.08
7pm Tech Code Snippets…
[...]sugarenia.com » Blog Archive » Call to designers: Single-line or multi-line CSS?[...]…