CSS + Sass

All of the following standards and practices on this page describe both CSS and Sass, unless otherwise noted.

Structure

• Use 4-space indents, not tabs
• Add four blank lines between sections and one blank line between blocks in a section
• Each selector should be on its own line, ending in either a comma or an opening curly brace
• Property-value pairs can be on a single line, if there is only one pair for the selector, otherwise they should be on their own line
• Optionally, sets of property-value pairs can align vertically on the : chracter
• The closing brace should be left-aligned, using the same level of indentation as the opening selector

Wrong

.selector-1, .selector-2, .selector-3 {
    background: #fff;
    color: #000;
    }

.selector-1 { background: #fff; color: #000; }

Good

.selector-1,
.selector-2,
.selector-3 {
    background: #fff;
    color: #000;
}

Best

.selector-1,
.selector-2,
.selector-3 {
    background : #fff;
    color      : #000;
}