SASS Standards

sass-standards.md

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/