Grow your CSS skills. Land your dream job.

Commas Before

Published by Chris Coyier

Marc Grabanski brought up and interesting idea on Twitter yesterday.

Commas before or after the line on json objects and multi var definitions?

Here are examples of object literals:

// commas before
var vampyre = {
    teeth: 'sharp'
  , blood: 'stale'
  , age: 320
}

// commas after
var vampyre = {
    teeth: 'sharp',
    blood: 'stale',
    age: 320
}

You probably see commas after structure the vast majority of the time. It "looks right." But the commas before makes these bits of code easier to work with.

Let's say you want to comment out one line. With the commas before technique, you just comment out the line like you would any other line of code in JavaScript by prefacing it with "//". With the commas after structure, you have to be more careful about that. If you were to comment out the last declaration (age), the last declaration would end with a comma and throw an error. So then you are left either manually removing that comma or also commenting it out.

It's technically a horse apiece, since commenting out from the middle of a block of declarations is the same either way. Commas before make it easier commenting out the last declaration and commas after make it easier to comment out the first.

Works the same way when declaring mutliple variables in one statement:

// commas before
var foo = 'bar'
  , boo = 'baz'
  , doo = 'dad'
  ;

// commas after
var foo = 'bar',
    boo = 'baz',
    doo = 'dad';

Notice the semicolon being first as well (via Scott González). This helps keep the ease of commenting alive (the whole point), in that you won't comment out the semicolon when commenting out the last line.

It's a really small thing, and it looks weird, but I'm a fan of the commas before idea. I think it comes down to the fact that when adding new declarations, I like to do it at the bottom and in such a way that, while testing, it's quicker and easier to comment out.

Comments

  1. Personally I’d favor readability, so commas after wins.

    • w1sh
      Permalink to comment#

      I agree. I prefer readable code, but I see how commas before is actually better.
      3+ methods and “commas before” wins on testability.

  2. Olivier
    Permalink to comment#

    Nice tip. But it’s the same with SQL query with the “AND”. It’s really easier to put the AND operator the beginning of the next sentance.
    Ie :

    WHERE
    clause_1 = 1
    AND clause_2 = 2
    AND clause_3 = 3

    If you have to comment one, it’s so simple :

    WHERE
    clause_1 = 1
    //AND clause_2 = 2
    AND clause_3 = 3

    • Jeremy
      Permalink to comment#

      I already do this SQL trick. I just never thought to do the same with commas. Great point

    • For some reason, I agree that this is the better way to format SQL queries, and I use it myself for SQL. But aesthetically the comma-before syntax just looks bad for object lists. What I do is implode for lists where things are inbetween (this is only for SQL, not object or array declarations…):

      PHP:

      $where = array();
      $where[] = "clause_1=1";
      $where[] = "clause_2=2";
      $where[] = "clause_3=3";
      $query = "SELECT ... WHERE " . implode(" AND ", $where);

      which makes commenting out a line easy as pie. But I digress. This is CSS tricks, not PHP tricks.

    • I really like the use of implode here Kent! I’ve never thought to use it in this fashion. Thanks for commenting! haha

  3. Permalink to comment#

    didn’t get a chance to comment on any of your earlier posts..just felt like thanking a hell lot for your videos section on css-tricks.com ..you rock man!!

  4. Permalink to comment#

    I’m with Darren. while this is nice for commenting, it fails at readability, which is more important to me.

    To each their own, but this also seems cumbersome to type.

  5. Permalink to comment#

    Wow, never thought of that before but that’s a great idea. Really nice when I need to comment stuff out during testing. I’m switching over today.

  6. Marijn Huizendveld
    Permalink to comment#

    I’ve been doing this for about a year know. At first it looks weird but I can definitely recommend it. Especially if you have an editor that supports block editing sections.

  7. brad dunbar
    Permalink to comment#

    I like the ease of commenting, and I’ve definitely been bit by this before.

    However, I think code readability is much more important. When the code is finished, it probably shouldn’t have commented out variables in it and so should be as readable as possible.

  8. Tom
    Permalink to comment#

    Or just do it like Python… comma on every line
    ( “something”,
    “something”, )

  9. Tom
    Permalink to comment#

    Not saying you can, obviously every language is different but would be nice right!

  10. Simon
    Permalink to comment#

    “If you were to comment out the last declaration (age), the last declaration would end with a comma and throw an error.”

    It’s worth noting that this is only an error in IE6 & 7. So depending on browser support or whether you’re just testing in FF/Chrome the last comma can be left in.

  11. Sean
    Permalink to comment#

    While I like the idea, my problem is with real world execution. If you are tabbing to indent your code, then it is actually going to look like this:

    var vampyre = {
        teeth: 'sharp'
        , blood: 'stale'
        , age: 320
    }

    I suppose if you are hand spacing your indents, then you can get to the look you use in your example, but then all the time you have saved by not having to do multi-line comments is lost.

    Not to mention that in most decent code editing software, commenting out code (be it one line or multiple is as simple as highlighting the block of code and then hitting a keyboard shortcut.

  12. I usually do commas after but the commas before thing is very interesting and I think I’ll it a shot next time. Thanks Chris!

  13. Sean
    Permalink to comment#

    Spacing didn’t transfer, but I think you get the idea.

  14. This makes me wonder if CSS semicolons could be treated the same way.

  15. I’m a huge fan of commas before syntax too!

    However, I drop one line more after the var word (or opening bracket), and the semicolon (or closing bracket) is at the beginning of the line.

    var
         foo = 'bar' // one tab, one space
        ,boo = 'baz' // one tab
        ,doo = 'dad'
    ;

    I try to put every beginning and end of instruction on its own line (same thing with JS, TSQL, PowerScript…).

    It took me few time to appreciate this syntax, but I REALLY like it now.

  16. Cmet
    Permalink to comment#

    Not just is commas before handy for commenting out, it also makes it easier to add new lines by copying/pasting the last line.

  17. Does it really help with commenting?

    // commas before
    var vampyre = {
        teeth: 'sharp'
      , blood: 'stale'
      , age: 320
    }

    What if I comment out “teeth: ‘sharp'”… haven’t we just moved the problem from “a problem when commenting out the last item” to “a problem when commenting out the first item”.

    • Correct.

      Quote:

      It’s technically a horse apiece, since commenting out from the middle of a block of declarations is the same either way. Commas before make it easier commenting out the last declaration and commas after make it easier to comment out the first.

      I think it comes down to the fact that when adding new declarations, I like to do it at the bottom and in such a way that, while testing, it’s quicker and easier to comment out.

  18. Permalink to comment#

    Isn’t both the same when it commes to commenting?
    If you comment the first line the code breakes too?

  19. First, I love that you wrote about this, as this is one of those near-and-dear style issues close to anyone who codes for the web’s heart.

    Second, for those PHP programmers out there, they got it right and allow a trailing slash in array declarations, which is an amazing choice which makes life easier for those that exploit it:


    $a = array(
    "oranges",
    "apples",
    "lemons",
    );

    I tend to agree that it simply changes the problem from the beginning of the list to the end of the list. I tend to prefer the commas after because it just looks better.

    Plus, use jslint and test your JavaScript code and the other drawbacks become academic.

    IMHO.

  20. Permalink to comment#

    Since commas before bring no real advantage, I think one should favor the convention, albeit a soft convention, over one’s personal preference. It is not about what *you* prefer, it is about readibility for others mostly.

  21. Permalink to comment#

    Interesting idea but I choose readability ftw. The good doesn’t seem to outweigh the bad especially since you kinda still have the same problem.. maybe just a little less often :/ interesting idea though!

  22. Permalink to comment#

    I go with readability all the way. I’ve found that poorly structured code is worse in a team environment because it takes someone more time to figure out what you are trying to do than it would to comment something out.

  23. This article by inimino argues nicely for commas-first: http://inimino.org/~inimino/blog/javascript_whitespace

  24. Permalink to comment#

    I always use commas first these days as particularly with Explorer it throws a wobbly if you leave a spare comma -> easy to do when writing a lot of Jquery code. I also find when writing complex mysql queries the comma before leads to less mistakes.

  25. I hate it when people do the commas-before trick. It just looks wrong. Is it really so hard to just double-check that you didn’t skip a comma?

  26. lilydjwg
    Permalink to comment#

    I don’t like the commas-before trick. Seems the only good is easier to comment out something, at the cost of losing readibility. As the Zen of Python says, “Readability counts”. Also, in many other languages a trailing comma does no harm. If you are using one of those languages at the same time, you’ll find it hard to switch to commas-before style in only Javascript.

  27. seelts
    Permalink to comment#

    Readability is always on the first place (IMO). So, my choice is “commas after”.
    Concerning SQL queries, I write both “AND before” and “AND after” statements, but more often a use “AND before”.
    The reason is that “AND”/”OR” words in queries are much more meaningfull then commas in arrays or some other lists.
    Commas are just the separators, and the reason to place than before or after – is just the case of habbit to place_comments/add_new_lines before first line or after the last one.
    In contrast: SQL words plays a big role in the logic and they should be visible. That’s why I think it is better to put them at the first place of the string.

  28. Huh? It’s not the position of the commas that is assisting commenting, it’s the use of new lines.

  29. Great article on commas before, have not really thought about applying this before but some great points, I really favour readability though. LT

  30. Permalink to comment#

    Cool article Man! I like to read your posts.

  31. Eliazer
    Permalink to comment#

    I would choose after, No questions, It just looks right :)

  32. Ray
    Permalink to comment#

    Interested point.

  33. I have always done this when writing SQL commands which I seem to be doing a lot lately. It makes everything a lot more readable.

  34. Permalink to comment#

    Did this a lot with SQL syntax too. It works well for that. But now I prefer the commas after approach, just because it looks better for most code. I guess it’s a preference thing, and might depend how often you need to turn comments on/off for each line.

  35. Permalink to comment#

    For me both are good. I use them as per my code requirement. Personally, it makes more sense to put the commas at the end and keep in mind you are not the only one working on an application, there might be some one else working along with you…. :)

  36. Permalink to comment#

    Well I’d have to say commas first is the mullet of JavaScript: commas in the front, party in the back!

  37. Permalink to comment#

    I like commas before in theory, but haven’t brought myself to put it into practice, and probably never will. There’s the ‘it looks wierd’ factor, and then readability for devs working on the code after me. The plus is it would help me with my trailing comma problem.

  38. Totally gotta be commas after. Readability is way more important to me than making it a little bit easier to comment. The best code should need no comments ;)

  39. Piyush Ranjan
    Permalink to comment#

    Ruby allows you commas even at the end of the statement!

  40. After.. But I can see how before could work as well. Thank you for the great post!

  41. Permalink to comment#

    can i type it on single line like

    var vampyre = {teeth: ‘sharp’, blood: ‘stale’ , age: 320}

  42. I’m a little late to the party, but I have to say I’m intrigued by the commas before approach. The commenting gains are moot, but I know commas first would have saved me a lot of time finding syntax errors in JavaScript I’ve written in the past. Straight line of commas in front? Good. No? Need to fix that.

    I have to call BS on the “readability FTW/it looks funny” comments. It’s simply a matter of what you’re used to seeing. Code with it for a few weeks and you’ll get used to it. Also, JSLint is configurable.

  43. Permalink to comment#

    never thought always used comma after, but it seem comma before is easy to read and it stand out in case of comma after much of the time we miss to see it.

    thanks for comma before

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".