body { font-family: .... font-size ... color ... }
a { text-decoration: none; }

div.content ul.table_of_contents
div.content ul.table_of_contents li
div.content ul.table_of_contents li h1
div.content ul.table_of_contents li h2
div.content ul.table_of_contents li span.pagenumber

div.navi ul.menu { display: ...; list-style-type: none; list-style-image: none; }
div.navi ul.menu li { float: left }

<ul id="level1" class="menu"><li> ...... </li></ul>
<ul id="level2" class="menu"><li> ...... </li></ul>
<ul id="level3" class="menu"><li> ...... </li></ul>

body.contactpage div.container ul.mainmenu li { color: green }

<ul class="mainmenu">
 <li class="item_first item_active item_1"> First item </li>
 <li class="item_2"> Second item </li>
 <li class="item_3"> Third item </li>
 <li class="item_last item_4"> Fourth item </li>
</ul>

reset.css
base.css
somepage.css
someotherpage.css
some_abstract_component.css

/* Table of Contents
   - - - - - - - - -
   Header stuff
   Body Stuff
   Some other junk
   - - - - - - - - -
 */
...
/* Header Stuff
 */
...
/* Body Stuff
 */

position: absolute; top: 10px; right: 10px;

padding: 10px; margin: 20px;
border: 1px solid black;

components                   target
---------------------------- --------
#answers .answer   .userinfo address
-------- --------- --------- --------
domain   component component selector

#page1 div.title, #page1 ul, #page1 span {
  // rules
}

#parent{
  width: 100%;

    #child1
    {
     background: #E1E8F2;
     padding: 5px;
    }

    #child2
   {
     background: #F1F8E2;
     padding: 15px
   }
 }

#parent #child1
{
 width: 100%;
 background: #E1E8F2;
 padding: 5px;
}

#parent #child2
{
 width: 100%;
 background: #F1F8E2;
 padding: 15px;
}

/* Headings and General Text */

.... stuff here for H1, etc..

/* Main page layout */

.... stuff here for layout page setup etc.

.page-section {
    width: 100%;
}
@media screen and (min-width: 1200px) {
    margin: 0 auto;
    width: 1200px;
}

.header {
  .primary-box {
    color: #000;
  }
}