一、引言
本文的核心观点为CSS的合并与模块化，似乎与前一篇文章“CSS样式的再分离”有矛盾，其实不然，分离可以精简CSS代码，合并也可以精简CSS代码，一切都是权衡！或是说是在恰当的情况下使用恰当的手段。
正如前文所提到的，分离可以精简CSS，但是同时会带来巨大的HTML代码的开销，显然，对所有的样式进行再分离式不切实际的，是会带来痛苦的。前文提到的“通用库”看似属于分离，其实又是分离之外的东西。“通用库”属于很良性的东西，任何网站都可以拿来用，不会产生什么副作用，因为其与当前项目的结构，样式表现没有必然的关联。“通用库”就像是一个公共资源，大家都可以来采撷。但是“实际项目库”却是个烫手的山芋，这是根据当前实际项目分离出来的独立样式集合，我们可能会分理出页面中常见的背景色样式（如background-color:#f7f7f7;），可那会分理出特定的粗边框样式（如border:3px solid #c80000;），一般情况下，这是很ok的，但是，如果一些模块化的样式（例如整站通用的按钮）也是使用的分离样式组合而成，那么，后期要是修改按钮样式，就会很痛苦，因为会有那么多的样式要替换。
所以，盲目的分离是会带来恶果的。
本文的“合并”和“分离”属于对立又相辅相成的，理解的“合并”与“分离”的精髓之后，您会发现写CSS代码就是一门艺术。同样的，本文也是为我后面的“我的CSS架构”一文做铺垫的，写这些都是为了同一个目的：写出最精简高效的CSS代码。
二、明确“模块化”专指“页面元素的模块化”
首先您要明确，样式再分离是应用到“模块化的独立元素”上可那会产生后期维护的问题，并不是应用到“页面模块”会产生后期维护的问题。例如，我们将很多分离的样式嵌入到一个整站通用的的“评论模块”中，是不会产生任何所谓的后期维护的问题的，除非您网站的评论并不是个“模块”，而是这里一段评论的HTML代码，那里又是另外一评论的HTML代码，有经验的开发人员都应该清楚我想要表达的意思。
本文标题所说的“模块化”指的是页面元素，例如网站通用按钮，通用选项卡，通用小图标，或是页面的一些固定框架结构等。这些元素是不适宜使用样式再分离的（或者说仅仅使用样式再分离）。
三、什么是CSS样式合并
何为CSS样式合并，所谓CSS样式合并，指的是一些不可分离的样式（按钮，图标等），将他们公共的样式部分进行合并，非公共的再次独立出来，以减小CSS文件的大小。我想，合并的做法很多同行都做过，可能不是很彻底，或是系统。很多时候，我们知道合并的好处，但是往往由于各种原因，没有从整体对样式进行设计与架构，造成样式合并的效果基本上没有发挥出来。下面我举个实例，会让您对样式合并有一个更进一步的认识。此实例来自淘宝首页，其对背景图片的样式合并。
我们使用小bug（我对firebug的昵称）随便看一个带背景图片的元素，例如下面这个（免费注册按钮）： 
此时firebug右侧显示的内容截图如下：
其对所有使用到这张sprite背景图的样式进行了合并，试想下，淘宝的背景图片地址这么长，加入这些样式不合并，那么首页的CSS大小增加的量可能要上K了，对于淘宝首页这样大流量的的页面来说，增加1K的大小，就是要从马云手中拿走成百上万的money~~
就我自己而言，使用最多的合并也是背景图片的合并。其次就是一些效果类似但又不完全一致的模块化元素。样式的合并，没有规律性可言，一般，遇到结构或是写法类似但又不完全一样的元素的时候，就可以使用样式的合并。
使用英文字符的逗号(,)分隔样式名，将相同的样式写在后面，这也些类似于初中数学里的“合并同类项”。项目不同，情况也各异，要想达到充分的样式合并，前期的设计与架构很重要。
四、CSS分离与CSS合并的共存
CSS“通用库”游离于三界之外，不参与这类纷争（例如与其他元素合并）。这里的CSS分离指的就是在实际项目中分离出来的“实际项目库”。一般情况下，“分离”与“合并”处于CSS文件的不同部分，两者是不搭噶的。“分离”一般针对那些非模块化的元素，而“合并”多针对模块化的元素，所以两者是对立的属于不同类别的，之间不会产生什么冲突。由于两者都有精简CSS代码的作用，所以双管齐下，事半功倍。
虽说“井水不犯河水，鸡腿有别鸭腿”，但是河水泛滥，家禽玩蛋之时，两者也会产生交集的。“分离”与“合并”也是如此。这不是一句话能够说清楚的，带我娓娓道来。
前面提到，模块化元素是不适宜使用分离的。比说如，文本框，设计师们往往喜欢在文本框上打主意，例如添加个淡灰渐变背景什么的，例如下面的效果（为截图）：
这里的文本框就是整站通用的独立的“模块化元素”，是不推荐使用分离的。总共整个网站，文本框的宽度有好几种，从宽度50像素左右的，200像素左右的，到450像素左右的都会有，我们不可能针对每个宽度写一个独立的样式的。显然，这里需要对文本框样式进行合并，将公共的部分独立出来，于是，我们可能会有如下的代码（其中inset的背景与其他背景图片元素进行合并了，所以这里只有background-position属性）：
宽度2：<input type="text"