Coding standards

CODING STANDARDS

CSS

Two spaces indentation (no tabs)

Good

.foo {
  display: block;
}

Bad

.foo {
    display: block;
}

Space before opening brace

Good

.foo {
  display: block;
}

Bad

.foo{
  display: block;
}

Space after the colon “:”

Good

.foo {
  display: block;
}

Bad

.foo {
  display:block;
}

Trailing semi-colon at the end of all declarations

Bad

.foo {
  display: block
}

Closing brace on its own line

Good

.foo {
  display: block; 
}

Bad

.foo {
  display: block; }

Final closing brace always followed by an empty line

Good

.foo {
  display: block;
}

.bar { 
}

Bad

.foo {
  display: block;
}
.bar { 
}

Each declaration on its own new line

Good

.foo {
  position: absolute;
  width: 200px;
  height: 100px;
}

Bad

.foo {
  width: 200px; height: 100px; position: absolute;
}

Lowercase, hyphen-delimited

Good

.lowercase-and-hypen-delimited {

}

Bad

.CamelCase_or_with_underscores {

}

(exception BEM, there you have to use double underscores)

Nesting should be followed by an empty line

Good

.foo {
  display: block;

  .bar {
    display: block;
  }
}

Bad

.foo {
  display: block;
  .bar {
    display: block;
  }
}

Comments only with // not with /* */ (they get rendered)

Good

// Comment

Bad

/* Comment */ (this one gets rendered in the compiled CSS)

Ruleset order: @include, then normal rules, then nested selectors

Good

.foo {
  @include mixin;
  display: block;

  .bar {
    display: block;
  }
}

Bad

.foo {
  .bar {
    display: block;
  }

  display: block;
  @include mixin;
}

Always use the colors function

No ID’s

Avoid using !important (except for some utility classes)