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 the 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 — :hover, :first-child, :last-child, :not(), etc

• Alphabetize (if multiple).
• Always before pseudo-elements like ::before.

li:first-child {}
li:first-child:not(.hide) {}

See Code > CSS > Nesting for additional info.

Pseudo-elements — ::before, ::after

• Always use two colons like ::before.
• Always after pseudo-classes like :first-child.

// 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);
}