• emberjs.com
• angularjs.org
• addyosmani.com/resources/essentialjsdesignpatterns/book

<div class='character-highlight'>
  <figure class='offer'>
    <a href='#flour'>
      <img src='flour.jpg' alt='Flour'>
      <figcaption>
        <h3>Almond Flour</h3>
        <p>Almond flour is low-carb</p>
        <span class='inline-cta'>
          <strong>$8.99 /lb</strong>
          <a href='#flour'>Order now</a>
        </span>
      </figcaption>
    </a>
  </figure>
</div>

.character-highlight {
}
.offer {
}
.offer > a {
}
.offer img {
}
.inline-cta {
}
.inline-cta strong {
}
.inline-cta a {
}

#about {
}

#about {
  h1 {
    font-size: 5em;
  }
}

#about {
  h1 {
    font-size: 5em;
    > span {
      margin-top: .5em;
    }
  }
}

#about {
  h1 {
    font-size: 5em;
    > span {
      margin-top: .5em;
    }
  }
  form#contact {
    .form-group {
      border-top: 1px solid #ccc;
    }
  }
}

#about {
  h1 {
    font-size: 5em;
    > span {
      margin-top: .5em;
    }
  }
  form#contact {
    .form-group {
      border-top: 1px solid #ccc;
      input[type="text"] {
        font-family: sans-serif;
      }
    }
  }
}

#about,
#contact-us {
  h1 {
    font-size: 5em;
    > span {
      margin-top: .5em;
    }
  }
  form#contact {
    .form-group {
      border-top: 1px solid #ccc;
      input[type="text"] {
        font-family: sans-serif;
      }
    }
  }
}

#about h1,
#contact-us h1 {
  font-size: 5em;
}
#about h1 > span,
#contact-us h1 > span {
  margin-top: .5em;
}
#about form#contact .form-group,
#contact-us form#contact .form-group {
  border-top: 1px solid #ccc;
}
#about form#contact .form-group input[type="text"],
#contact-us form#contact .form-group input[type="text"] {
  font-family: sans-serif;
}

One file for each or divided by comments on a single file

• Color scheme & variables
• Mixins, extends, helpers
• Baseline
• Webfonts
• Persistent
• Modular
• Specific page (each)
• Media queries
• Print

$honorable-black: #222;
$light-blue: #b5d5e1;
$light-blue-harsh: #73a8b6;
$blue-harsh: #4387a0;
$rust: #f5e6a2;
$rust-harsh: #e5bd32;
$mustard-harsh: #d19e18;
$blood-harsh: #d52b08;

.clearfix {
  &:before,
  &:after {
    content: '';
    display: table;
  }
  &:after {
    clear: both;
  }
}

.unstyle-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

@mixin transition($length) {
  -webkit-transition: all $length ease-out;
     -moz-transition: all $length ease-out;
       -o-transition: all $length ease-out;
          transition: all $length ease-out;
}

html {
  font-size: 1.4em;
  line-height: 1.4;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body {
  margin: 0;
}
a {
  color: darken($light-blue, 45);
  @include transition(200ms);
  &:hover {
    color: darken($light-blue, 35);
  }
}
h1 {
  font-size: 3em;
  margin: .3525em 0 .7em;
  text-transform: uppercase;
}
h2 {
  font-size: 2.2em;
  margin: 1.25em 0 .5em;
}
img {
  max-width: 100%;
}
small {
  font-size: .8em;
}
ul,
ol {
  padding: 0 0 0 1.25em;
  margin: 1em 0;
  list-style-position: outside;
}
nav ol,
nav ul {
  @extend .unstyle-list;
}

@font-face {
  font-family: 'Gotham';
  src: url('/fonts/gotham.eot');
  src: url('/fonts/gotham.eot?#iefix') format('embedded-opentype'),
       url('/fonts/gotham.woff') format('woff'),
       url('/fonts/gotham.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}

[role='banner'] {
  width: 14.375em;
  position: fixed;
  background-color: $light-blue;
  @extend .clearfix;
}
[role='navigation'] {
  margin: 1.2em 0;
}
.social {
  font-size: 2em;
  line-height: 1;
  text-align: center;
}
.social a {
  padding: 7% 14%;
  display: block;
}
[role='main'] {
  position: relative;
  padding: 1em 2.5em;
  background-color: $rust;
}

.button {
  display: inline-block;
  padding: .75em 1.25em;
  background-color: $blue-harsh;
  &:hover{
    background-color: darken($blue-harsh, 20);
  }
}
.button-group {
  @extend .clearfix;
  @extend .unstyle-list;
}
.button-group li {
  float: left;
  margin: 0 .5em;
  padding: .1em 0;
  vertical-align: top;

  &:first-child {
    margin-left: 0;
  }
  &:last-child {
    margin-right: 0;
  }
}
.button-group .button {
}

.brand a {
  display: block;
  background-color: transparent;

  &:hover {
    background-color: transparent;
    padding: 0;
  }
}
.brand img {
  display: block;
}
.brand .logo {
  margin: 0 0 .3em 0;
}
.brand .slogan {
}

.text-heavy {
  max-width: 57em;
  margin-bottom: 5em;
}
.keywords {
  @extend .clearfix;
  @extend .unstyle-list;
  margin-left: -.2em
}
.keywords li {
  float: left;
  padding: .1em .5em;
  margin: .2em;
  background-color: $rust-harsh;
  border-radius: 0.3em;
  text-shadow: .05em .05em 0 rgba($rust, .4);
}

.pagination {
  margin: 2em 0;
  @extend .unstyle-list;
  @extend .clearfix;
}
.pagination li {
}
.pagination li a {
}

#landing {
  font-size: 2.2em;
}
#landing [role='main'] {
  margin: 0;
  padding-top: .6em;
  text-align: center;
  @extend .gotham-font;
}
#landing header {
  padding: 1.25em 0 1.65em;
  background-color: $light-blue;
}
#landing .brand {
  width: 8.44em;
  margin: 0 auto;
}
#landing .button-group {
  font-size: .75em;
  margin: 2.5em 0 0;
}
#landing .button-group li {
  float: none;
  display: inline-block;
}

@media (max-width: 1320px){
  html {
    font-size: 1.2em;
  }
}

@media (max-width: 1000px){
  [role='banner'] {
    width: auto;
    position: static;
    padding: .4em 1.5em;
  }
  [role='banner'] .brand {
    float: left;
    width: 7em;
  }
  [role='navigation'] {
    float: right;
    margin: 0 2.25em 0 0;
  }
  .social {
    position: absolute;
    top: .15em;
    right: .15em;
  }
  [role='main'] {
    margin: .2em 0 0 0;
    padding: 1em 1.5em;
  }
  h1 {
    margin-bottom: .7575em;
  }
}

@media print {
  @page {
    margin: 1.2cm;
  }
  * {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  body {
    font-family: sans-serif;
    font-size: 10pt;
    line-height: 1.4;
  }
  a[href^="http"]:after {
    content: " \2014   " attr(href);
    font-size: 90%;
  }
  .vessel {
    padding: 0 .2em;
  }
  section {
    padding-bottom: 2.4em;
  }
  .print {
    display: block;
  }
}

• ux.mailchimp.com/patterns
• github.com/styleguide/css
• bbc.co.uk/gel
• sfdc-styleguide.herokuapp.com
• clearleft.com/styleguide
• mozilla.org/en-US/styleguide

• foundation.zurb.com
• getbootstrap.com

It does!

• smacss.com
• bem.info
• bradfrostweb.com/blog/post/atomic-web-design
• gov.uk/design-principles
• livingstyleguide.org
• github.com/bjankord/Style-Guide-Boilerplate
• github.com/adactio/Pattern-Primer
• alistapart.com/article/creating-style-guides