Sass Style Guide.md

• Explain helper classes

Rules

Template

/* Bad */

/* Good */

Always alphebetize attributes

/* Bad */
.widget
  width: 100px
  height: 50px
  color: #333
  font-family: monospace
  background-color: #eee
  
/* Good */
.widget
  background-color: #eee
  color: #333
  font-family: monospace
  height: 50px
  width: 100px

Always include units

/* Bad */
.widget
  margin: 0 1em

/* Good */
.widget
  margin: 0em 1em

Prefer longhand syntax

/* Bad */
.widget
  background: url(../image.png) #fff left top
  font: bold 12px/16px Georgia

/* Good */
.widget
  background-color: #ffffff
  background-image: url(../image.png)
  background-position: 0px 0px
  font-family: Georgia
  font-size: 12px
  font-weight: bold
  line-height: 16px

Prefer selectors with no parental context

/* Bad */
.widget
#sidebar .widget

/* Good */
.widget
.widget--sidebar

Prefer unnested selectors

/* Bad */
.widget
  .title
  
/* Good */
.widget
.widget__title

Naming Conventions

/* Templates Rules (using Sass placeholders) */
%template-name
%template-name--modifier-name
%template-name__sub-object
%template-name__sub-object--modifier-name

/* Component Rules */
.component-name
.component-name--modifier-name
.component-name__sub-object
.component-name__sub-object--modifier-name

/* Layout Rules */
.l-layout-method

/* Test Rules */
.t-selector

/* State Rules */
.is-state-type

/* Non-styled JavaScript Hooks */
.js-action-name

Classes

The Grid

```sass .l-columns .l-large-[1-12] .l-medium-[1-12] .l-small-[1-12] ```