css模块化（二）
上一篇讲了几个概念，这次，我们讲讲实例，描述常见的一些设计模式。
如果熟读了鬼哥的css模块化的内容，你就会发现，他的文章系列中的好几篇我们之前就已经讲过，所以就不赘述了。
那么，我们为毛要进行模块化呢？肯定是有好处的，没好处，追求它干啥？
在研究这个问题之前，我们先看问题，思考问题，然后解决问题。
如下图：
像这样的设计，你该怎么办？
我们尽可能给出所有的正经的css+html设计方案。
方案一：基类和原子类（面向属性）的拼接
html:
<div id="wrapper"> <div class="module w240"> <header> <h1>标题标题</h1> </header> <div class="bd bg54BAF3"> <p>xxx各种描述</p> <p>xxx各种描述</p> <p>xxx各种描述</p> <p>xxx各种描述</p> <p>xxx各种描述</p> </div> </div> <div class="module w440"> <header> <h1>标题标题</h1> </header> <div class="bd bg9C0"> <p>xxx各种描述</p> </div> </div> <div class="module w240"> <header> <h1>标题标题</h1> </header> <div class="bd bgF27B2E"> <p>xxx各种描述</p> </div> </div> <div class="module w440"> <header> <h1>标题标题</h1> </header> <div class="bd bgb8efe1"> <p>xxx各种描述</p> </div> </div> </div>
css:
* { margin:0; padding:0; } #wrapper { margin:20px auto; width:724px; overflow:hidden; zoom:1; } /*这尼玛就是原子类啊*/ .w240 { width:240px; } .w440 { width:440px; } .bg54BAF3 { background:#54BAF3;} .bg9C0 { background:#9C0; } .bgF27B2E { background:#F27B2E; } .bgb8efe1 { background:#b8efe1; } /*基类*/ .module { float:left; margin:0 20px 20px 0; } .module header { height:30px; line-height:30px;color:#333; font-size:14px; } .module header h1 { font-size:14px; text-indent:10px; background:rgba(238,238,238,0.7); border:1px solid #ddd; border-radius:4px 4px 0 0; } .module .bd { height:200px; padding:10px; border-radius:0 0 4px 4px; color:#fff; } .module .bd p { }
在线demo：http://jsfiddle.net/xmlovecss/EbuqG/
方案二：就是四个模块，同一样式属性，在css中进行合并
html：
<div id="wrapper"> <div class="module1"> <header> <h1>标题标题</h1> </header> <div class="bd"> <p>xxx各种描述</p> <p>xxx各种描述</p> <p>xxx各种描述</p> <p>xxx各种描述</p> <p>xxx各种描述</p> </div> </div> <div class="module2"> <header> <h1>标题标题</h1> </header> <div class="bd"> <p>xxx各种描述</p> </div> </div> <div class="module3"> <header> <h1>标题标题</h1> </header> <div class="bd"> <p>xxx各种描述</p> </div> </div> <div class="module4"> <header> <h1>标题标题</h1> </header> <div class="bd"> <p>xxx各种描述</p> </div> </div> </div>
css：
* { margin:0; padding:0; } #wrapper { margin:20px auto; width:724px; overflow:hidden; zoom:1; } /*公用样式*/ .module1, .module2, .module3, .module4 { float:left; margin:0 20px 20px 0; } .module1 header,.module2 header,.module3 header,.module4 header { height:30px; line-height:30px;color:#333; font-size:14px; } .module1 header h1,.module2 header h1,.module3 header h1,.module4 header h1 { font-size:14px; text-indent:10px; background:rgba(238,238,238,0.7); border:1px solid #ddd; border-radius:4px 4px 0 0; } .module1 .bd,.module2 .bd,.module3 .bd,.module4 .bd { height:200px; padding:10px; border-radius:0 0 4px 4px; color:#fff; } .module1 .bd p,.module2 .bd p,.module3 .bd p,.module4 .bd p { } /*私有样式*/ .module1,.module3 { width:240px; } .module2,.module4 { width:440px; } .module1 .bd { background:#54BAF3; } .module2 .bd { background:#9C0; } .module3 .bd { background:#F27B2E; } .module4 .bd { background:#b8efe1; }
在线demo：http://jsfiddle.net/xmlovecss/Pd6GX/
方案三：基类和扩展类（面向对象命名）
html:
<div id="wrapper"> <div class="module extend_mod1"> <header> <h1>标题标题</h1> </header> <div class="bd"> <p>xxx各种描述</p> <p>xxx各种描述</p> <p>xxx各种描述</p> <p>xxx各种描述</p> <p>xxx各种描述</p> </div> </div> <div class="module extend_mod2"> <header> <h1>标题标题</h1> </header> <div class="bd"> <p>xxx各种描述</p> </div> </div> <div class="module extend_mod3"> <header> <h1>标题标题</h1> </header> <div class="bd"> <p>xxx各种描述</p> </div> </div> <div class="module extend_mod4"> <header> <h1>标题标题</h1> </header> <div class="bd"> <p>xxx各种描述</p> </div> </div> </div>
css:
* { margin:0; padding:0; } #wrapper { margin:20px auto; width:724px; overflow:hidden; zoom:1; } /*基类*/ .module { float:left; margin:0 20px 20px 0; } .module header { height:30px; line-height:30px;color:#333; font-size:14px; } .module header h1 { font-size:14px; text-indent:10px; background:rgba(238,238,238,0.7); border:1px solid #ddd; border-radius:4px 4px 0 0; } .module .bd { height:200px; padding:10px; border-radius:0 0 4px 4px; color:#fff; } .module .bd p { } /*扩展类*/ .extend_mod1,.extend_mod3 { width:240px; } .extend_mod2,.extend_mod4 { width:440px; } .extend_mod1 .bd { background:#54BAF3; } .extend_mod2 .bd { background:#9C0; } .extend_mod3 .bd { background:#F27B2E; } .extend_mod4 .bd { background:#b8efe1; }
当然，这个示例中，也有人会把结构中的扩展类改成id来做区分。
在线demo：http://jsfiddle.net/xmlovecss/YZFPV/
在分析上面的实例时，有一点必须说明，我给出的三种方案里，都是扩展，没有重写。如果要涉及到重写，第一种方案就最糟糕了，样式权重会成为一个灾难。
我们分析一下上面三种方案的可行性：
-
第一种：如果整个项目中就出现一次这样的界面，并且忽略语义化，那无可厚非，还可以。改动起来不是很费事儿。如果还要增加其它的个性属性（样式），那么得制造多少原子类啊！
如果不止一次地出现这样的界面，次数越多，你想想，pd驱动设计改界面，到时候，面向属性的原子类命名，不止一个页面的html修改，哭去吧，骚年。
-
第二种：尽管有人会觉得，第二种方案好像比较傻逼。事实上，第二种方案也是比较聪明的方案，可扩展性强，维护代价低，语义好。尽管折腾吧，毫无惧色。
-
第三种：第三种方案的出现，其实是为了规避第一种方案的命名不语义化，规避第二种的重复属性声明。好处不言自明，不拿id做区分的话，样式声明需要有先后的顺序，共性module样式声明在前，个性样式extend_module声明在后。
好了，分析完啦。这只是一个简单的示例，没有使用覆盖，而用的都是扩展，不会造成重绘的问题，因而提高了页面渲染效率。
给个小练习吧：
再来个复杂点的：
