CSS模块化

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.