CSS Architecture Example - GothamSass/chrysler GitHub Wiki

// 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 { }
.grid { }
 
// State Rules
.is-state-type { }
 
// Non-styled JavaScript Hooks
.js-action-name { }
 
//----------------------------------------------------------------------------------------------------------------
 
/* A component */
.button-group { }
 
/* A component modifier (modifying .button) */
.button--primary { }
 
/* A component sub-object (lives within .button) */
.button__icon { }
 
/* A layout class */
.l-header { }
 
//----------------------------------------------------------------------------------------------------------------
 
.declaration-order {
 
  /* Extend/Inheritances & Mixins*/
  @extend my-extend;
  @include my-mixin();
 
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
 
  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;
 
  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;
 
  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
 
  /* Misc */
  opacity: 1;
}