CSS的样式合并与模块化.docVIP

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