SCSS Style Guide

Specificity

Keep CSS rules as flat as possible. Add specificity globally as needed to override central styles.

#{$specify} .foo

Use quasi-qualifiers where possible to indicate where a class is expected to be used.

/*.foo*/.bar

instead of

.foo .bar

If selecting an id is necessary, do so with an attribute value selector.

[id="foo"]

Style

Use 2 spaces to indent, or soft tabs set to 2 spaces. Always place a space between the selector and the opening bracket

.foo {}

Keep a "one change per line" practice - every selector and declaration should be on their own line unless there is only one selector AND one declaration. Always use a semicolon after every declaration.

.foo,
.bar {
  property: value;
  property: value;
}

.baz { property: value; }

Naming

Use hyphons to separate words in a name instead of underscores or camelCase. .foo-bar is good, .fooBar is bad.

Use semantic names for classes. Describe their purpose, not their use exact case or exact functionality. .footer-link is bad .secondary-link is good.

Whitespace

Thoughtful use of whitespace promotes faster readability. Use 1 blank new line between every rule, 3 between loosely related rules, and 5 between sections.