说了这些，不难发现，CSS样式越是分离，就可以使每个类重用性发挥到极最大化，CSS代码就越精简！不过凡事都不是绝对的，所谓此消彼长，当CSS样式分离的多了，自然html的代码就会增加。如：tab选项卡，每个的宽度是自适应的，还有定位的出现，那么html的代码就夸张了，且繁琐，不易维护。这时我们就不能只有CSS分离了；又如一组展示商品页，所有的li左浮动，若在每处加上的话，显然不合适。从而，并非是所有的地方都适合使用分离独立的样式。从而需要权衡，而具体该怎么做，如何权衡？说的玄乎点，凭经验，其实，这确实是一个凭借经验来判断的。

　　3.2 设计师的配合

　　不管设计师与前端开发是否是一人，要想使样式的分离功效最大化，设计师所扮演的角色至关重要。

　　比如区块间的间距，有10像素、15像素、12像素，边框一处是#DADADA，一处又是#D4D4D4D等，那么独立出的类重用性就大打折扣。

　　设计师在设计页面时，也该有如后台开发人员一样的模块意识，有时不能为了一处的效果好看些，就独立一处的设计。当然，物极必反，不能全部都统一风格，还是有精细之处。

　　3.3 前端工程师的功力

　　之所以要分离CSS，其目的为的是精简网站的CSS文件，倘若执行者的水平，也就是功力不够，那么在分离的同时，亦会增加更多的CSS代码，如：不能很好的使用最简单的代码实现兼容的效果，使用了过多的hack等，反而枉然。从而对CSS理解透彻，对整站CSS进行架构及对分离权衡，至关重要。

　　4 CSS样式合并

　　说完分离，下面来说合并，似乎这两者有冲突，实际，目的是一致的，都是为了使CSS精简。

　　CSS样式合并，就是对一些不能分离的样式，如背景图片，将公共的部分合并，非公共的部分分离独立出来，我常用的是应对于 CSS Sprites,看下图

　　

　　微博页面中对背景图样式进行了合并，倘若不这样，那增加的CSS代码量就惊人了。当然这种做法，是普通的，也是大家使用最多的。这里想说说另外一种样式合并。我称它为“组合式”样式。

　　4.1 CSS分离与合并（组合）

　　这一观点，也是我使用了样式分离后，慢慢的在项目中发现的。之前说到了CSS通用库，它就似“孙悟空”，跳出三界外，不在五行中。通用类的属性都是CSS所固有的，非变量的。而还有一些分离出来的类，原先我也是放在通用库中，如mt10: margin-top:10px; cor_1: #666;而现在我把它分离出通用库，称之为基本样式库。

　　分离一般使用在那些非模块化的元素，这里说的合并就该是应用于模块化的元素。这里先跑下题，解释下模块化元素。其实是我没说清楚，我说的模块不是通常意义上如网站页眉，页脚等，而是页面中的一个特定区块，如按钮、文本框、全站公用图标，这些模块是不宜使用样式分离的。

　　举个例子：

　　这里我想再引入一个概念栅格化布局，具体什么不多说，只是因为这是个前提，我通常采用的是24栏宽度950的布局。说这个是解释后面举例中这些数值的来历。

　　在定义独立的样式时，会定义大量乘40减10的宽度值，如230,190.270，510等，

　　.w1 { width: 230px; }

　　.w2 { width: 190px; }

　　.w3 { width: 270px; }

　　那么当有一个层宽度刚好是230时，<div class=”w1”></div>

　　这个看似完美，其实隐患很多。后期一旦某一天要改变宽度，230改成240，单改w1的类，那么所有引用它的都会变，显然不行。怎么办，以前我的做法是，找这个div父层中的类，比如可能是在main层下面，那就再加个样式

　　.mian w1 { width: 240px; }

　　可是也可能main下有几个层都用到了w1，而只能改一个。怎么办，放在以前我会单独的给这个层命名，如side，然后单独定义宽度。其实这种做法离我要表达的合并的概念很近了。而现在我同样是给这个层命名side，但是不去定义它的宽度，而是直接<div class=”side w1”></div>

　　这样，在没有更改的情况下，它依然是宽度230，而当有变化时。定义.side{width: 240px; } 因为基本样式库在页面引用时在上面，而页面特有样式在下面，按照CSS的权重，后定义的权重大。这样做，既保证了CSS样式分离，对于模块化元素又解除了隐患，同时使得这个模块有了语义化的名称。

　　5 CSS架构

　　在说了这些前提后，就可以来说说我写本文的目的了，CSS的架构。

　　其实关于这点，前辈们又很多的做法，本文的开头提过。对于符合web2.0的网站，我是只用一个CSS文件，因为风格统一，不管页面有多少，CSS文件可以控制的非常小，而且高性能，同时页面扩展性也非常好。但要是门户型，就不适用了。那么就需要一个拆分，也就是架构了。

　　1、CSS重置库

　　2、通用样式库

　　3、公共样式库

　　4、布局样式库

　　5、按钮、图标、表单库

　　6、模块库

　　7、私有库

　　5.1 CSS重置库

说到这个，从最初级是不定义，到*{ margin:0; padding:0 }一棒子打死，再到body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{ margin: 0;padding: 0; }