6 ms·

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

by shazow 15y ago

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?

csswizardry 15y ago
For me it is purely habit. I think: to each their own, just aim for consistency :)
bbx 15y ago
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?!).
- beaumartinez 15y ago
  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.
  - bbx 15y ago
    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 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...).
    - MindTwister 15y ago
      > 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.
    - prawn 15y ago
      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.
talmand 15y ago
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.

by shazow 15y ago

csswizardry 15y ago

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

bbx 15y ago

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?!).

beaumartinez 15y ago
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.
- bbx 15y ago
  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 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...).
  - MindTwister 15y ago
    > 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.
  - prawn 15y ago
    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.

talmand 15y ago

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.