Styleguide

Hi, this is my personal styleguide. I use it to share how I like to code. You can fork it on GitHub or ask me questions on Twitter.

CSS Declarations

A declaration block in CSS refers to an entire block of CSS between the < >brackets. For example:

.header  font-weight: bold; > 

A declaration refers to one property: value; line.

font-weight: bold; 

Here's some rules that focus on declaration blocks and lines.

• End every declaration with a semicolon.
• Place closing braces of declaration blocks on a new line.
• Include one space after : for each declaration.

Bad

.head

Good

.head  display: block; border: 1px solid #a80; > 

Place empty line between blocks

Separate blocks of declarations by an empty line. Except for declarations that are single lines.

Bad

.col-1 < width: 50%; >.col-2

Good

.col-1  width: 50%; > .col-2  width: 25%; > 

One line per property

Every property within a rule set should be on it's own line. This helps with error detection when processing your CSS in a CI setup.

Single lines

You can break the one line rule when a ruleset contains one declaration, it should be placed on a single line.

Bad

.call-to-action < width: 100px; height: 100px; >.email-link

Good

.call-to-action  width: 100px; height: 100px; > .email-link  display: block; > .twitter-link  display: inline; > 

Use shorthand declarations

Whenever possible use the shorthand notation for properties rather than the full lines. For more reading I recommend this Mozilla article.

Bad

border-width: 1px; border-style: solid; border-color: #000; 

Good

border: 1px solid #000; 

Find anything wrong with this guide? open an issue on GitHub.