Style Guide

Formatting and whitespace

Casing

  • Lowercase only
  • Hyphen between words
// Good
.add-to-cart-button {}

// Bad
.addtocartbutton {}
.addToCartButton {}
.add_to_cart_button {}

Rules

  • One space after selector
  • Opening curly-brace followed by new line
  • Closing curly-brace on new line
  • Blank line between rules
// Good
.selector {
    color: #000;
}

// Bad
.selector{color:#000;}

Declarations

  • One declaration per line
  • Colon and one space after every property
  • Semi-colon after every value
// Good
.selector {
    color: #000;
    font-size: 20px;
}

// Bad
.selector {
    color:#000; font-size: 20px
}

Multi-value declarations

  • Put each expression on a new line
.selector {
    box-shadow:
        0 0 5px 0 black,
        inset 0 0 0 1px red;
    font-size: 20px;
}

Indentation

Use 4 spaces (not tabs) for indentation.

.selector {
••••color: #000;
}