Modular CSS http://blog.liveeditorcms.com/modular-css/

_bios.scss

$bio-breakpoint: 500px;

.bio {
    @media screen and (min-width: $bio-breakpoint) {
        float: left;
        width: 50%;
    }
}

.bio-photo {
    text-align: center;

    @media screen and (min-width: $bio-breakpoint) {
        float: left;
        text-align: left;
        width: 25%;
    }
}

.bio-content {
    text-align: center;
    
    @media screen and (min-width: $bio-breakpoint) {
        float: left;
        text-align: left;
        width: 75%;
    }
}

.bio-name {
    font-size: 20px;
    margin-bottom: 2px;
}

.bio-title {
    font-size: 15px;
    margin: 0 0 10px;
}

.bio-description {
    font-size: 13px;
}

chain-of-selectors.css

ul#summer-drinks li {
   font-weight: normal;
   font-size: 12px;
   color: black;
}

/* This does nothing because the more-specific style above "wins" */
.favorite {
   color: red;
}

/* This one actually changes the color, but now you have to type this crap all over again */
ul#summer-drinks li.favorite {
  color: red;
}

chain-of-selectors.html

<ul id="summer-drinks">
   <li class="favorite">Whiskey and Ginger Ale</li>
   <li>Wheat Beer</li>
   <li>Mint Julip</li>
</ul>

contexts-and-states.scss

.discount {
    padding: 20px;

    // State: when a discount is selected, highlight it
    //
    // You would use it like this:
    //    <div class="discount is-selected">...</div>
    &.is-selected {
        background: #ffc;
    }
}

// Context: sometimes we may need less padding depending on context.
//
// You would use it like this:
//     <div class="discount discount-cozy">...</div>
.discount-cozy {
    padding: 10px;
}

module-example.html

<div class="bio">
  <div class="bio-photo">
    <img src="/images/chris-peters.jpg" alt="Chris Peters">
  </div>
  
  <div class="bio-content">
    <h2 class="bio-name">
      Chris Peters
    </h2>
    <p class="bio-title">
      Founder, CEO
    </p>
    <p class="bio-description">
      Competently network enterprise content before business methods of empowerment.
      Phosfluorescently revolutionize business vortals after maintainable ideas.
      Collaboratively administrate parallel products rather than holistic collaboration
      and idea-sharing.
    </p>
  </div>
</div>

page-based.css

/* Normal kinds of styles */

p {
    margin-bottom: 15px;
}

li {
    line-height: 1.2;
}

/* ...etc. */

/* Then "pagey" styles start appearing, overriding the previous styles as needed */

.home li {
    line-height: 1.3;
}

.about-us p {
    margin-bottom: 14px;
}

/* ...etc. */