Skip to content

Instantly share code, notes, and snippets.

@adamyonk
Last active December 31, 2015 20:49
Show Gist options
  • Save adamyonk/8043178 to your computer and use it in GitHub Desktop.
Save adamyonk/8043178 to your computer and use it in GitHub Desktop.
  • 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] ```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment