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
/* Bad */
.widget
margin : 0 1em
/* Good */
.widget
margin : 0em 1em
/* 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
/* 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
```sass
.l-columns
.l-large-[1-12]
.l-medium-[1-12]
.l-small-[1-12]
```