Hacker News Reader

Comment by shazow | Hacker News Reader

Here is a very petty point that isn't mentioned in the guidelines, but implied by example: Is there a good reason why people don't like putting a space after a colon? Such as...

    margin:0;

Instead of...

    margin: 0;

The latter looks much more natural to me (probably because I'm used to writing English and other syntaxes), so I don't believe there's an aesthetic benefit. Chrome Inspector and Firebug also prefer the latter, so I don't believe there's a tool benefit. If saving a byte before processing was an issue then we'd be hitting less CRs, so there's no real bandwidth benefit. I don't get it, but I keep seeing it more and more.

Is there some benefit to no-space-after-colon that I haven't considered? Was it established as a standard somehow while I wasn't paying attention?

View on HN

I always write

  margin:0;

instead of

  margin: 0;

Here's why.

The first reason I do is because you don't need to write that space. It doesn't seem like much but it makes a difference when you're writing up to more than 1000 lines for one CSS (I type every word using Notepad++).

Second reason is: by removing this space, it joins the property (margin) and the value (0) together. And because I write my CSS in lines, it makes a difference when scanning visually.

  input { background:white; border:none; float:left; font-size:14px; margin:0; padding:5px; width:400px;}

is easier for me to scan than

  input { background: white; border: none; float: left; font-size: 14px; margin: 0; padding: 5px; width: 400px;}

because I can easily target any pair property/value.

And the reason I don't mind the lack of space after the colon is probably because I'm French and in French there needs to be a space before and after a colon. So I guess that if I remove the one before I might as well get rid of the one after (for symmetry?!).

I'd never thought of it that way. However, for me,

    input,
    select {
        background: white;
        border: none;
        float: left;
        font-size: 14px;
        margin: 0;
        padding: 5px;
        width: 400px;
    }

Is more readable—each rule and selector on its own line. I am biased as I use Vim and half-page scroll lots, and like an 80-character maximum, though.

I started writing CSS just like that. It makes reading properties easy but takes a lot of vertical space (and unlike you, I hate to scroll). So I write properties on one line, which makes reading selectors easy (example: http://jgthms.com/wings.css).

I compensate by ordering my properties alphabetically so I can scan horizontally to find any property (background and border come first, margin and padding are near the middle, text-transform and width are near the end...).

> I compensate by ordering my properties alphabetically so I can scan horizontally to find any property (background and border come first, margin and padding are near the middle, text-transform and width are near the end...).

Not a bad idea... I'm stealing it.

I put "more likely to cause layout trouble" bits closer to the front where they'll be spotted more quickly. e.g., float, border, width, etc.

I don't write margin:0; but use margin: 0;

The reason is because of shorthand: margin: 20px auto 10px; === works | margin:20pxauto10px; === fails

Therefore, putting the space after the colon is pure habit for spacing reasons.

Yes, I understand that margin:20px auto 50px; works. It's just habit and preference.

For me it is purely habit. I think: to each their own, just aim for consistency :)

Reply on news.ycombinator.com