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.