Add spaces between property: value; in CSS

[inlikealion]

Does what it says on the label.

[inlikealion]

Forgot spaces before opening brackets the first time around.

[cust0dian-old]

Of course this is purely personal preference, but property: value style seems to be dominant at the moment:

1. In specifications

   • From CSS Level 2 specification:

     h1 { 
       font-weight: bold; 
       font-size: 12pt;
       line-height: 14pt; 
       font-family: Helvetica; 
       font-variant: normal;
       font-style: normal;
     }

   • From CSS Level 3 Transforms specification:

     div {
       height: 100px; width: 100px;
       transform-origin: 50px 50px;
       transform: rotate(45deg);
     }

   • From Selectors Level 3 specification:

     h1 { font-family: sans-serif }
     h2 { font-family: sans-serif }
     h3 { font-family: sans-serif }

2. Default format for displaying CSS rules in browser's developer tools

   • Chrome's Developer Tools:

   

   • Firebug for Firefox:

   

   • Firefox's Developer Tools:

   

3. In Mozilla Developer Network refernce

   • From color property refernce:

     element { color: red }
     element { color: #f00 }
     element { color: #ff0000 }
     element { color: rgb(255,0,0) }
     element { color: rgb(100%, 0%, 0%) }
     element { color: hsl(0, 100%, 50%) }
     
     /* 50% translucent */
     element { color: rgba(255, 0, 0, 0.5) } 
     element { color: hsla(0, 100%, 50%, 0.5) }

4. In various styleguides

   • From Mozilla's Webdev Bootcamp:

     Use a colon (:) immediately after the property name, followed by a single space, then the value.
     

   • From GitHub's CSS Styleguide:

     Put spaces after : in property declarations.
     

   • From Google's HTML/CSS Styleguide:

     Use a space after a property name’s colon.
     

   • From Wordpress's CSS Coding Standards:

     Properties should be followed by a colon and a space.
     

   • From ThinkUp's Code Style Guide: CSS:

     Property-value pairs should be listed starting on the line after the opening curly brace. Each pair should:
     
     ...
        • have a single space after the colon that separates the property name from the property value;
     ...
     

Since CSS Guidelines is supposed to be a reference material, decreasing (although really small) amount of time needed to "parse" the code by utilizing the style that is more common should be a good thing.

I'm for merging this in 👍

[cm0s]

+1

[pim]

Well, this is how Harry writes CSS (example), so it might be a bit hard to get this merged to his very own guidelines ;)

[inlikealion]

@pim Actually this is out of context here on github. I have already asked @csswizardry about this on Twitter and he agreed: https://twitter.com/csswizardry/status/426406662015287296

I pointed out that given his method of using 2x spaces in markup between classes for legibility, it was inconsistent to remove spaces in his declarations what reduce legibility. Harry said he has already started adapting his style to be consistent with this and that he would be open to accepting this pull request.

[pim]

@inlikealion Oh, I understand. That’s good then – I prefer to use spaces too :)