Styleguide

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 {
  display: block;
  border:   1px solid #a80 }

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 {
  width: 25%;
}

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 {
  display: block;
}

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;