scss_styleguide.md

SCSS styleguide

This style guide recommends best practices for SCSS to make styles easy to read, easy to maintain, and performant for the end-user.

Rules

Naming

CSS classes should use the lowercase-hyphenated format rather than snake_case or camelCase.

// Bad
.class_name {
  color: #fff;
}

// Bad
.className {
  color: #fff;
}

// Good
.class-name {
  color: #fff;
}

Formatting

You should always use a space before a brace, braces should be on the same line, each property should each get its own line, and there should be a space between the property and its value.

// Bad
.container-item { 
  width: 100px; height: 100px;
  margin-top: 0;
}

// Bad
.container-item
{
  width: 100px;
  height: 100px;
  margin-top: 0;
}

// Bad
.container-item{
  width:100px;
  height:100px;
  margin-top:0;
}

// Good
.container-item {
  width: 100px;
  height: 100px;
  margin-top: 0;
}

Note that there is an exception for single-line rulesets, although these are not typically recommended.

p { margin: 0; padding: 0; }

Colors

HEX (hexadecimal) colors should use shorthand where possible, and should use lower case letters to differentiate between letters and numbers, e.g. #E3E3E3 vs. #e3e3e3.

// Bad
p {
  color: #ffffff;
}

// Bad
p {
  color: #FFFFFF;
}

// Good
p {
  color: #fff;
}

Indentation

Indentation should always use two spaces for each indentation level.

// Bad, four spaces
p {
    color: #f00;
}

// Good
p {
  color: #f00;
}

Semicolons

Always include semicolons after every property. When the stylesheets are minified, the semicolons will be removed automatically.

// Bad
.container-item {
  width: 100px;
  height: 100px
}

// Good
.container-item {
  width: 100px;
  height: 100px;
}