1. Base

2. Layout

3. Module

4. State

5. Theme

 

1) Base rules

Base rules are the defaults.

eg:

html, body, form {
    margin: 0; padding: 0; }input[type=text] {
    border: 1px solid #999; }a {
    color: #039; }a:hover {
    color: #03C; }

 

2) Layout rules

divide the page into sections. Layouts hold one or

more modules together. 

 

3) Modules

are the reusable, modular parts of our design. They are

the callouts, the sidebar sections, the product lists and so on.

 

4) State rules

are ways to describe how our modules or layouts will

look when in a particular state. Is it hidden or expanded? Is it active

or inactive? They are about describing how a module or layout

looks on screens that are smaller or bigger. They are also about describing

how a module might look in different views like the home

page or the inside page.

 

5) Theme rules

are similar to state rules in that they describe

how modules or layouts might look. Most sites don’t require a layer

of theming but it is good to be aware of it.