css模块化

封装：

HTML代码                                                               <div class=”module-a”>
    <h3>标题1</h3>
    <p>描述文字</p> </div> <div class=”module-b”>
    <h3>标题2</h3>
    <ul>
        <li>列表</li>
        <li>列表</li>
        <li>列表</li>
    </ul> </div>  

CSS代码

.module-a{.....} .module-a h3{.....} .module-a p{.....} 
.module-b{.....} .module-b h3{.....} .module-b ul{.....}
.module-b ul li{.....} .module-b ul li{.....} .module-b ul li{.....}

继承

HTML代码                                                            
<div class=” module module-A module-A-a”></div>
<div class=” module module-A module-A-b”></div>

CSS代码                                                                  
.module {.....}
.module-A {.....}
.module-A-a {.....}
.module-A-b {.....}
    .module-B {.....}
        .module-B-a {.....}
        .module-B-b {.....}

多态

HTML代码
<div class=”module-A”></div>
<div class=”part-A ”>
      <div class=”module-A”></div>
</div>
<div class=”part-B ”>
      <div class=”module-A”></div>
</div>
<div class=”part-C ”>
      <div class=”module-A”></div>
</div>

CSS代码                                                                 
.module-A {.....}
.part-A .module-A {.....}
.part-B .module-A {.....}
.part-C .module-A {.....}

来源：http://blog.csdn.net/hacke2/article/details/21700073