Grow your CSS skills. Land your dream job.

Poll Results: CSS Formatting

Published by Chris Coyier

The poll actually had a variety of options, including different options for Multi and Single line formatting. But what I found most interesting is the sheer domination of Multi line:

For the record, I'm a single line guy. Most multi-line people talk about how that style is easier to read. I can understand that, but to me, the scrolling gets laborious. I feel like I can scan single line format just as quickly, and have it more of it available at once in my screen real estate. Do what works best for you though!

And remember this poll is about formatting, not how you organize your selectors, or how your break up your CSS, just purely how you arrange the selectors, brackets, properties, and values. Those other things might make for interesting articles down the road a spell.

I'll leave this poll up (in the sidebar) for a little while until a new poll drops, then it's off to the archives.

Comments

  1. jan
    Permalink to comment#

    HI, great poll results!

    I’m fan of single-line format with Indenting, it’s more practical, readable and no loooong scrolling, which is almost neverending in longer style sheets

  2. Multiline all the way. Get an editor that supports code folding & you get best of both.

    • Permalink to comment#

      After reading through all the comments first I need to agree with those who say it is a personal preference. I feel either way is just fine based on your personal coding style.

      Myself, I prefer single line. While I learned multi-line in the onset years ago I came to prefer single line as it was a faster method for me.

      I do keep things organized and commented for those who follow behind me but I like being able to see more of the code on the screen at a given time. All of the sites I build personally as a freelancer or for my personal use are coded single line.

      At work however I code multi-line for the benefit of those I work with. My co-workers prefer multi-line and they are the majority, with really no significant excuse for one over the other I see no reason to not set aside my preference. They prefer multi line as it is easier for them to read (I say them because I find single line very easy to read).

      In the end to each his/her own just make sure it is done properly =)

      As for the program, I agree again with those who say it does not make any bit of a difference. I personally use Dreamweaver in Code view because I love the way it stacks all of the css files linked to a single page so that when I have the page open it allows access to each style sheet used by the page. Other than that, I use Espresso from time to time and I write the majority of my CSS in the FireBug windo for FF then just copy it over with no real software support.

      The results were interesting, the discussion it brought about even more so, thanks Chris for sharing the info.

      Matt Blasi

  3. “Multi line” format for creating a stylesheet for better readability ..but , there’s a website that compress your css to a single line..that’s what i usually do ..is that a good practice?

    • Permalink to comment#

      Always compress your CSS when feeding it to the front-end. That way it’ll load much faster.

    • Permalink to comment#

      Hmmm.. this sounds like kinda paranoid… in the most of case compressing a css file will allow you to gain, how much, 3kb of white-spaces less?

      Surely is not a bad idea, but i dont think it can worth a lot ;)

    • Will
      Permalink to comment#

      3kb adds up fast on a busy site.

  4. Lars
    Permalink to comment#

    What a mindless poll!

    If you programing professional CSS then you shoud use a CSS Editor like Eclipse. This will make you code automatically nice with multi line.

    At live websites use a optimizer like csstidy to make the code short and fast.

    • jan
      Permalink to comment#

      “If you programing professional CSS then you shoud use a CSS Editor” – So it means if I am not using CSS editor I’m not programing professional CSS?? :). I think this is pretty much everyone style of writting the code, unless it i readable and well formated even in single line, that’s fine.

    • Lars
      Permalink to comment#

      Do you ever try a CSS Editor?
      If not, please try Eclipse / Aptana or similar Tool.

      – it ist much faster
      – less Errror in Code
      – less cross Browser Problems
      – better, nicer Code
      – allways up to date with new Browsers
      – easier integration in JS Script an HTML

      You can use a lot of comments in your code and then in published CSS code it is all clear and short.

      That is what fine;-)

    • Permalink to comment#

      Are you being paid by this company to go around to blogs and post ads for them? lol

    • Daniel
      Permalink to comment#

      Im sure thats not the case lol, eclipse is a brilliant IDE regardless of language, syntax and its completely free so..

      Anyway I really would promote trying ut eclipse, it offers not only a great depth of error checking, debugging and logging tools but allows you to customise every element of your formatting to aid you in creating the format that works best for you.

      In all I must agree its best practice to always condense the code when publishing but I think the poll is about how you personally write it, not publish.

      Personally I go for a Multi – Single Line format with open bracket indentations, I maintain a format for various elements on their own lines i.e.
      #style(display, width, height, float etc etc
      (fon

    • Permalink to comment#

      WHAT? Aptana? Aptana is faster? faster than…handwriting, maybe!

      Pale, a good programmer can do good CSS even using NOTEPAD.

      The editor is a tool to help you with, not a meter for the programmer professionality.

    • Daniel – The editor is a tool to help you with, not a meter for the programmer professionality.

      I have to totally agree with that. I do all my work in notepad++ and I haven’t more trouble with cross browser than using Dreamweaver for example.

    • ben
      Permalink to comment#

      if you program professional css code why would you need a editor? :s

    • It’s not like CSS is really all that complicated (assuming you’re calling yourself a professional and you are in fact -experienced- with CSS). I give props to CSS editors because (from my experience not necessarily with Eclipse), they do provide a less error prone method but I don’t think it’s a medium that determines what makes a professional or not. Sometimes, it takes longer to click around in a program than it does to just hand write it and test it yourself.

      As my boss used to say, attention to detail goes a long way.

    • Permalink to comment#

      @Stephanie Chung: agree with you, a professional must use a professional editor.. but is not the editor that make the user a professional!!

      And a professional coder can do good css even writing it by hands on paper!

      Say that with eclipse you’ll ahve “less cross Browser Problems” is just stupid.

    • Permalink to comment#

      “- less Errror in Code”
      “- less cross Browser Problems”
      “- better, nicer Code”
      “- allways up to date with new Browsers”
      “- easier integration in JS Script an HTML”

      WTF are you talking about?!?! You are a hilarious human being. Very entertaining comment :D

    • alan
      Permalink to comment#

      Most of the time I write my code in firefox’s developer extension.
      You can write your code in any css editor.
      Eclipse is great tool.

    • Permalink to comment#

      What a mindless comment!

      Your level of CSS skill has nothing to do with the software you choose to write it in.

    • Permalink to comment#

      Wow, the comment at the start of this thread is completely ignorant and laughable.

      I like to think I write HTML / CSS pretty quickly and organized AND I don’t really ever have huge cross-browser issues that I need to sort out. Being tied to a specific program to write your code is so limiting.

      And if you want to shorten your CSS, there are so many tools out there that can compact it. It’s really just removing the white space. I could write a script for you…and I wouldn’t need a specific editor to do it ;-).

      What isn’t professional is going on a forum and insulting nearly every reader.

  5. Permalink to comment#

    Very interesting results. Didn’t know that multi-line would dominate so greatly.
    Personally I’m a fan of multi-line formatting, been like that since the start.

    • “Since the start…”

      I think that’s why multi-line is so dominant, is because in tutorials and books, it’s the most commonly shown. It’s easier to present code that way in the context of a book or tutorial. Monkey see, monkey do =). That’s exactly what I did for years and years so no offense intended.

    • Permalink to comment#

      And maybe because Dreamweaver users do use the CSS rule definition window.

    • Permalink to comment#

      Yup! I was reading down through this list of comments and I was going to bring up this exact point. I am one of those monkeys.. I learned CSS from a book and the book I learned from showed to do it multi line indented so.. that is what I am comfortable doing.. I might try it out the other way but you know what they say about old dogs and new tricks..

    • Sid
      Permalink to comment#

      There’s more to multi-line than just comfort level. It keeps the code organised and neat and you can always minify on the live server. If you are smart enough to debug using Firebug, then you don’t have to worry about scanning through the code to find a particular class or id.

      But I think the bigger point here is that it doesn’t have to be one or the other. For me, it doesn’t make sense to use multi-line when there are 3 or less properties. But if there’s more, I use it.

    • Permalink to comment#

      For me its the same, basically i use multi-line cause my monitor is a CRT 17”..
      Try to use single line with this ·&$!|@# and u will end up y-scrolling… haha

    • Ben
      Permalink to comment#

      I think you’re onto something here.

      I was multi-line because that’s how every book and tutorial does it, and not wrongly – for a single CSS snippet, multi-line probably is easier to read.

      But I recently converted to single-line with all the properties in alphabetical order. It makes any non-tiny styleshee sooooo much easier to read!!

      And if horizontal scrolling really irks you, just turn on word-wrapping in your editor.

    • Permalink to comment#

      Just as an addition… All my programming in school for PL/I, Pascal, C, etc… required that we multi-line formatting with lots of commenting. That was the biggest influence for me.

      Plus, for me, reading everything in single line is similar to having an entire screen full of icons. Needle in a haystack. No flow…

  6. Permalink to comment#

    I write in single-line and then minify when the site is live.

    So, I guess I lose? ;)

  7. Multi-line here, but that’s how I learned in the first place so I’m bias. Guess it just comes down to a matter of personal preference.

  8. Permalink to comment#

    I used “multi-line” too – but now, I’m always using single-ling with no actual structure (like alphabetic stuff etc.)

    Don’t think it’s more work for me, so I’ll keep it that way :) .

    • It’s inline not single-line. Same thing, just kidding :)

      Just wanted to agree about the NO ACTUAL STRUCTURE part. It just takes more time to keep it structured while coding it, and for what? I don’t write 100 CSS lines per attribute, i can find my way through 10 lines of non structured css.

  9. jared
    Permalink to comment#

    single line all the way

    #id { }

    was a multi line guy but it got to be really lengthy and tough to go through all the ids and classes

  10. I used to be a multi-liner, but then I saw the light and the truth and switched to alphabetised indented single line. One day all you multi-liners will see the error of your ways, just like I did.

    Relax! I kid! (Sadly, not about the alphabetisation. Yes, I geek.)

    Go with whatever floats your boat. Once you minify it, it all looks the same anyway (i.e. a huge unreadable mess).

  11. I’m a freelancer but also work for a large digital firm in Atlanta. While I guess I can buy the “scannability” argument of single-line, I find it so much harder to maintain, especially in a multi-developer environment.

    If you’re on your own, do whatever floats your boat. But when multiple devs are working on it, it just turns into a hot mess with single-line.

    As for endless scrolling, normally I just search for what I’m looking for, usually based on a line number FireBug gives me. It’s not that big a deal. Besides, you should be commenting your css into logical blocks of related items anyway.

    • I can buy the collaboration argument for sure.

      Also “hot mess” is an awesome phrase that should be used more.

    • Permalink to comment#

      I totaly agree wtih you guys, just write it mulit-line (personal preference) and minify when loading it on the page.

      Do “whatever floats your boat”, but keep it light and clean when loading it on the site.

      In every single editor, just search for the element, id, class or whatever and edit. And anyway, i like y-scrolling far more better than x scrolling. X scrolling is freaking me out in every IDE, site, app etc etc

  12. Permalink to comment#

    I use multiline because I shamefully copy+paste from firebug :P

  13. Permalink to comment#

    I use the multiple line code when starting on a bit of the website so that its easier to read. Once I have finished that section I will change it to a single line so I don’t have to scroll down to my newer sections that I would be working on.

    • Permalink to comment#

      I do the opposite…single-line to develop, then switch to multi-line when done. That way it’s easier to keep organized during dev time, and easier for others to read and maintain during future dev cycles. At least that’s how I do it now…

  14. Angéllica
    Permalink to comment#

    I agree with Chris Coyier about books examples.

    I am a multi-liner, I work in group and most of my co-workers prefer using multi line :)

    I use single line for common css needs. Like layout structure, fonts styles and reset. Keep it short, simple and readable :)

  15. Permalink to comment#

    I only use multi-line, but I think I would consider using single if I had a wider screen. As it is (my current resolution is 1024×768 and I don’t usually have my window maximized) if I try single line I end up having to do a lot of horizontal scrolling, which seems to defeat any advantages of single-line.

  16. Caitlin
    Permalink to comment#

    I’m a big fan of the look of single-line, but if I’m looking for one specific argument, I have difficulty scanning over a single line to find exactly what I’m looking for. So in practice I’m a multi-line girl.

    I don’t do much scrolling anyway – usually I navigate through the file with search/find. :)

  17. Permalink to comment#

    “I feel like I can scan single line format just as quickly, and have it more of it available at once in my screen real estate. ”
    You know there is a lot of CSS editors that display your code, and at the same time, a list of all your “header of lines” ? (don’t know how to say that in english)

  18. Lee Smith
    Permalink to comment#

    Beginners learn from css that’s written multi-line style…they’ll eventually move to single-line once they start building larger css files and see that scrolling forever sucks.

  19. @LEE – I agree with that!

    Single Line forever!

  20. Alexia
    Permalink to comment#

    I used to be a multi-line kind of gal because I liked the compact readability. Plus, that’s how I was taught by my first site at Geocities. Haha :)

    But now, esp. after watching a couple of your screencasts, I swear by single-line formatting and shorthand code. Everything is just a little easier to sift through.

    Plus, the tabs don’t get butchered anymore. ;)

  21. Permalink to comment#

    My personal preference is multi-line, but that’s all it is: a personal preference. I’ve found that it’s a lot easier to do a diff/compare on multi-line CSS than on single-line CSS.

    Two “tool-based” reasons why I don’t buy the “better scanability” argument for single-line:
    #1 When inspecting an element in Firebug, it tells you the CSS file and exact line of the selector you’re inspecting. Very easy to jump to that specific line in your text editor.
    #2 If you’re using the ‘group’ feature in CSSEdit, scanning multi-line vs. single-line really isn’t much different.

    But it all comes down to what works best for you as an individual and/or team. Certainly both approaches have their pros and cons.

    @Chris I suppose the next discussion could be about ordering of properties within a declaration block (alphabetical, etc). Here’s my preference.

  22. Permalink to comment#

    i use mixture of both.
    for some of the simple rules i write single lines and for complex or continued css structures i prefer multilines.

  23. NKjoep
    Permalink to comment#

    I started coding CSS without any particular editor… andddddd … i always prefer multi-line style!!

    it’s faster to read :)

    …but when i think about deploying big css for optimization… if single line saves really many KB… so deploy them with single line

    doh!

  24. “but to me, the scrolling gets laborious” Amen.

    With some good colors for color coding its really easy to scan them in the single line format. Thus IMO readability is not bad.

  25. senshikaze
    Permalink to comment#

    i have started shifting small snippets to single line, but if my css rule is more than 5, i have to multi-line it to just read.
    and really. you hate scrolling? Do you one line your javascript for the same reason?
    Though really I could switch to single line because i put a section header with comments in my css for stuff starting at the top going to the bottom of the html.

    oh and i use gedit, notepad2, and smultron (depending on OS), so no IDE for me.

  26. Michael Short
    Permalink to comment#

    I am kinda on the fence here. sometimes i use single line others i use multi-line but mostly multi-line. Although single line i pretty much always use for related styles like Height and width.

  27. Permalink to comment#

    I’ve recently taken to using a combination of the two. Overall I use multiline, but with each selector I group related properties onto single lines, so I end up with stuff like this:
    #id {

  28. Permalink to comment#

    oops tab+space = post. Sorry for the double post but I want to finish my example.
    #id{
    margin:0px; padding:0px;
    position:relative; left:-13px;
    font-size:12pt; text-decoration:none;
    width:80%; height:12em;
    }

    It cuts the scrolling in half, but still keeps things organized how I like.
    sorry again for the double-post

  29. Anonny
    Permalink to comment#

    I started single-line, but couldn’t stand it. Single-line’s a bad habit I had to learn to stop doing in my programming days out of self-defense.

    It’s only cleaner when it’s tiny enough to not matter. And it’s easy to convince yourself that something you wrote and understand is readable, even if you’d be baffled by it otherwise. As for scrolling, even notepad has a search function, what are you using?

  30. Permalink to comment#

    As a programmer, I have to say multi-line. People who put more than one instruction on a line for anything other than trivial code should be shot in the face.

  31. Great..!

    Thanks..!

  32. Permalink to comment#

    What’s the big deal about scrolling? Any editor should allow you to jump to a line number.

  33. Mikes
    Permalink to comment#

    I use multi-line for some entries, single-line for others. Sometimes I indent; sometimes I don’t. It just depends on which makes a particular entry the most readable and how I’m feeling that day. I think they are both equally usable and don’t consciously realize which I’m looking at. It’s all code.

  34. Single Line for life. This especially makes it easy to run through lines of code with minimal scrolling. I learned on multi line but once I really got used to really moving the carat in all directions(with commands) single line made more sense. On the other side of things as a text mate user I know friends who use find and or command+L (for line numbers) to jump around to different lines. I guess its all preference for me my decision is made.

  35. Permalink to comment#

    The thing about the laborious scrolling argument against multi-line formatting is a good code editor like TextMate eliminates the need for scrolling by providing a quick tag browser and bookmarks.

  36. Permalink to comment#

    I started out using multi-line because I came from Java programing, but after a while I was inspired by other web designers code to switch to a single-line format. Since then I have not had the urge to switch back.

  37. Josh
    Permalink to comment#

    I tried single-line formatting for a while and actually switched to multi-line. The issue I had with it was that either the text wraps and I found that in order to keep it organized I’d have to add another space, which made for more scrolling, or I let it not wrap and I have to scroll to the right.

  38. Niall
    Permalink to comment#

    If an element in my CSS has more than 3 properties, I’ll go multiline. Otherwise, single line.

    Sure it can be annoying if I’m constantly switching back and forth but it works for me (:

  39. If you use an invalid property or value many browsers will give you the line number of this. Another good reason to write multi-line.

    The scrolling argument (which seems to be the only argument) goes away if you have an editor that can collapse blocks.

  40. Permalink to comment#

    Chris how you integrated the forums of CSS-Tricks with wordpress?Will you please point me to any tutorial or right one?Thanks

  41. Zoran
    Permalink to comment#

    I think this is personal choice and normally that if i use one way i would think the others suck, but it’s not right, cause everyone does what suits him best. Chris is right about monkey see monkey do phrase, but whatever way works for you is fine, there shouldn’t be one general correct way of formatting your CSS, the best one is the one that suits you most. Btw i am using multi line style and not just for CSS, than for anything else, it is best readable way for me.

  42. Art
    Permalink to comment#

    Before I’m into multi-line format writing CSS, but eventually I find easier to arrange the selectors in single-line format.

    Multi-line formats are more easier to read, but when reading more lines of codes is much more easier in single-line formats.

    I think this depends on the coder, but your poll result is very informative.

  43. Permalink to comment#

    i alwasy use mut-line .

  44. I would say single line format is easier to read and maintain… but that’s just me. Thanks for the cool poll!

  45. icetrix
    Permalink to comment#

    I am a beginner in webcoding but I found that I use both of them… But scrolling really is tedious, so I probally gonna switch to Single Line coding.

  46. Permalink to comment#

    I used to be a multi line but I did like the one liner due to the lack of scrolling so I kind of do both like this

    #divid {
    margin:0; padding:0px; etc etc
    }

  47. Permalink to comment#

    Multi line is generally used by people who use dreamweaver and just copy dreamweavers style, these people generally code long hand css as well.
    Pros use single line and shorthand css.

  48. Chase
    Permalink to comment#

    I always used multi line. I thought it was much cleaner.

    Then I worked on a website that had huge amounts of code, and was formatted in single line. I didn’t really notice it at first, but when I did, I realized how difficult my job would have been had it been multi line.

    From then on I decided that grouping everything into a single line was, in the long run, much cleaner than having an endless wall of text.

  49. Permalink to comment#

    Single Line!

  50. Matt
    Permalink to comment#

    Does anyone know if Dreamweaver has an option to collapse its default multi line to single line? A lot of times I will copy CSS from examples or other developers work and its in multi line and prefer not to manually make it in to single line.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".