SASS Standards

SCSS STYLEGUIDE

A mix of CSS-Tricks and CSS Guidelines

Extensions

Compass

Syntax and Formatting

Two (2) space indentation, not tabs
Keep lines at a maximum of 80 characters
Hyphenated class names (no camelCase or snake_case)
Single (1) line space between blocks of styles
Avoid nesting more than 3 deep
Use compass mixins over vendor prefixes
No trailing whitespace
To keep specificity low, use IDs as little as possible.
Do not use !important unless absolutely without a doubt unavoidable

Line Spacing

one selector per line
one rule per line
UNLESS there is a single rule, then you can leave it on one line

Naming Conventions

BEM (Block, Element, Modifier)

Limit use of ID's for styling

.block__element--modifier

translates to something like .person__eyes--blue

JS specific classes

Use these classes to separate styling from JS actions.

.js-dosomething

CSS Selectors

Portability

Do not use qualified selectors.

Bad: input.button {}

Good: .button {}

One of the only times to use a semi-qualified selector is something like the following. This could help future developers understand a bit more of what's being styled without actually qualifying the selector.

/*ul*/.nav {}

Style Order

@extends
@includes
regular styles
nested pseudo classes/elements
nested selectors

Variables

If you use a number more than once then think about adding it as a variable.

All colors should be variablized

Commenting

Always side on making too many comments versus not enough. Comments should get stripped when compiling.

Multiline Comments

/**
 * I am a long-form comment. I describe, in detail, the CSS that follows. I am
 * such a long comment that I easily break the 80 character limit, so I am
 * broken across several lines.
 */

Titling

Prefixing with a hash (#) symbol allows for targeted searches. leave a carriage return between title and next line of code.

Section Title

//-----------------------------------------------------------------------------
// SECTION-TITLE
//-----------------------------------------------------------------------------

.selector {}

Sub-Section Title

// Sub-Section Title
//-----------------------------------------------------------------------------

.selector {}

Block / Inline Comment

// Some kind of comment here
.selector {
  display: inline-block;
  // Or some comment here
  margin: 10px 2px;
  color: hot-pink; // or here
} // .selector

Filesystem

style files organized by components/modules
break into as many small files as makes sense

Main SASS File

application.scss

Import Order

files prefixed with an underscore, _images.scss

resets
vendor
base configs & styles
modules
partials (singles)
print

// Example
@import 'compass';

@import 'compass/reset';

@import 'vendor/flexslider';

@import 'base/layout';

@import 'modules/images';

@import 'partials/header';

@import 'base/print';

Additional Config Files

These files should not be touched.

EditorConfig

.editorconfig: This file is for unifying the coding style for different editors and IDEs

Install: http://editorconfig.org/#download

scss (SASS) linting

.scss-lint.yml

Install: https://github.com/brigade/scss-lint#installation

JS Hint

.jshintrc

Install: http://jshint.com/install/

eriku/sass-standards.md