Style Guide

Syntax and whitespace

  • Lowercase selectors.
  • One space after selector.
  • Opening curly-brace on the same line as the selector.
  • Closing curly-brace on new line.
  • One blank line after closing curly-brace.
button {
    // Declarations...
}

img {
    // Declarations...
}

See Code > CSS > Naming for detailed selector naming practices.

Selectors

Grouped selectors

  • One selector per line.
ol,
ul {
    // Declarations...
}

Attribute selectors

  • Use single-quotes around value (preferred).
  • Use double-quotes when it’s necessary.
// Good
[attr='value'] {}
[attr="When It's Necessary"] {}

// Bad
[attr=value] {}
[attr="value"] {}

Combinator selectors

  • Space before/after combinators.
// Good
.parent > .child {}
.sibling + .sibling {}

// Bad
.parent>.child {}
.sibling+.sibling {}

Pseudo-classes

  • Alphabetize (if multiple).
  • Pseudo-class before pseudo-element.
li:first-child {}
li:first-child:not(.hide) {}

See Code > CSS > Nesting for additional info.

Pseudo-elements

  • Always use two colons like ::before.
  • Pseudo-element is always last (after pseudo-classes).
// Good
a::before {}
a:first-child::before {}

// Bad
a:before {}
a:before:first-child {}

See Code > CSS > Nesting for additional info.

Declarations

  • Lowercase properties.
  • Lowercase values (except colors).
  • One declaration per line.
  • One space after colon.
  • Semi-colon after every value.
// Good
button {
    color: #000;
    font-weight: bold;
}

// Bad
button {
    COLOR:#000; FONT-WEIGHT:BOLD
}

Indentation

Use 4 spaces (not tabs) for indentation.

button {
••••color: #000;
}

Multi-value declarations

  • Each expression on a new line (including the first).
  • Indent each expression 4 spaces.
  • Comma after each expression.
  • Semi-colon after the last expression.
// Good
button {
    box-shadow:
        0 0 0 1px #CCC,
        0 0 5px 0 rgba(0, 0, 0, 0.5),
        inset 0 0 0 1px red;
    font-size: 20px;
}

// Bad
button {
    box-shadow: 0 0 0 1px #CCC, 0 0 5px 0 rgba(0, 0, 0, 0.5), inset 0 0 0 1px red;
    font-size: 20px;
}

Colors

Hexadecimal

  • Use shorthand (if possible).
  • Uppercase color value.

HSL, RGB, RGBA

  • No space before opening parenthesis.
  • One space after comma.
// Good
button {
    color: #000;
    color: #C4C4C4;
    color: hsl(25, 25, 25);
    color: rgba(0, 0, 0, 0.2);
}

// Bad
button {
    color: #000000;
    color: #c4c4c4;
    color: hsl(25,25,25);
    color: rgba(0,0,0,0.2);
}