本文来自在于网络，虽然很多东西并不规范，但有着非常重要的思维。模块化开发思想在CSS网页布局中的应用是非常重要的。52CSS.com转载这篇文章希望对大家有所启发。本文中的多个h2标签并列使用，本人认为并不可取，在实际开发中，应该注意避免这样的现象。
我没有看过CSS模块化的相关书籍，所以我下面说的不一定正确，但是在工作中，我会用我理解的模块化方式提高工作效率，我理解的模块化，主要分为两类。
一、将常见的样式剥离出来，形成单独的样式，我叫他基础样式表或模块样式表，这个样式表主要一些常见的基本结构和形式，如CSS Reset、Blank、Font 等等。
例如下面这个样式表，我认为就是一个简单的基础样式表。（只是简单，不推荐用）
Example Source Code
* {margin:0;padding:0;border:none;outline:none;}
.cb {clear:both;}
.blank10 {height:10px; font-size:1px; overflow:hidden; clear:both;}
二、在页面中按照结构模块化书写样式表，避免样式之间的干扰，并且方便浏览。
例如下面的这个结构
Example Source Code
...
我爱CSS -
...
...
有一部分同学可能会这样写
Example Source Code
.wrap_content_box {float:left;}
.wrap_content_box h2 {...}
Example Source Code
...
...
我爱CSS -
...
刚刚看上去的时候效果很不错，一切都很完美，代码少，效果也实现了，但如果有一天，我们需要将所有h2的样式变的各不相同时，情况仿佛不乐观了。
Example Source Code
.wrap_content_box {float:left;}
h2.XX {...}
h2.YY {...}
h2.ZZ {...}
h2.XYZ {...}
Example Source Code
...
...
我爱CSS -
...
迫不得已的，我们增加了很多带有不同标记的样式。可是1年后呢有人问起你这些样式所控制的对象是什么？
我可以肯定你会说，“我很费解”。
或者当你自己又写了一个“h2.XX”（命名重复的情况经常出现），无意覆盖了这个1年前的样式，而你又不知道，又恰巧被你的老板发现了…….上帝只能说，阿门，哥们，点被不能怨上帝。
可如果在一开始我们用这种方法写呢？
Example Source Code
.wrap_content_box {float:left;}
#wrap_con_00 h2, #wrap_con_01 h2 {...}
Example Source Code
...
...
...
我爱CSS -
粗看是多了一些，但是当我们再次遇见给h2增加不同样式的时候，我们可以…
Example Source Code
.wrap_content_box {float:left;}
#wrap_con_00 h2,{...}
#wrap_con_00 h2.first {...}
#wrap_con_01 h2,{...}
#wrap_con_01 h2.first {...}
Example Source Code
...
...
我爱dezai.cn
...
看，这样是不是好多了，这种格式在1年后，有人问起的时候，我肯以肯定你会说“我不费解”。
上帝也不会找你麻烦了。 [cool]
本文只是抛砖引玉，文章分析的不够细致，在52CSS.com以后的内容中，将增加这部分知识，欢迎您的关注。 本文作者:佚名 来源:http://www.52css.com/
CIO之家 www.ciozj.com 微信公众号:imciow