蟒蛇pk大象:浅析网站开发CSS架构

1 写在前面的

　　以下内容是平时工作中所积累形成的，其中不乏带有个人感情色彩。在此只是阐述及归纳。 2 整体阐述

　　当你是一个从业多年的WEB前端人员，或是开发过大量的页面，就会发现一个现象，即使不是同一个网站，所定义的CSS中也很多相同的类，当然，不是同一网站没法合并，倘若是同一个网站，每个频道，或是一个频道的每个页面要都是一套CSS样式，是不是太浪费了。那么是不是该把这CSS掰开、揉碎好好的说道说道。CSS架构，这个学术性的名称就被我引用了。

　　在讨论整个CSS架构前，我想先来说说CSS本身。众所周知，CSS的诞生，就是样式与结构的分离，就代表着精简与重用。

　　在多年前，人们开发网站是，样式都是写在html代码中，维护起来那个繁琐是不言而喻的，有了CSS后，当需要定义一个字体颜色时，就可以：.red { color: #F00; } 页面中凡需要字体为红色时，都可以引用，修改起来也就是一步的事情。同时解放了html代码。

　　可随着网站内容日益丰富，我们已经不能单单只停留在初级的样式与结构的分离层面。需要对CSS进行解剖，因为只有深层次的了解它，才能更好的驾驭。

　　在对CSS处理的问题上，各个网站的做法都不尽相同。有整个站点就一个CSS文件的，一般符合web2.0标准的，如开心网；有分为页眉，页脚，主体不同部分的；有按个频道页面建立样式的；亦有几个公共样式表，其余视不同页面建立的。更有所有CSS都放在页面head中的。

　　所有这些，并无正确错误之分，只有是否适合，毕竟一切做法为的都是更为高效简洁的代码。

　　这里我想说说自己的做法。一个站点CSS文件分为：CSS重置库；通用样式库；公共样式库；布局样式库；按钮、图标、表单库；模块库；私有库。

　　除了最后一个，其余都是公共的库。这样做虽然是单个页面的连接数有所增加，但是对于门户型网站，其整体的开发成本会有大大的降低。不过实现这种开发模式有几个前提，样式分离；样式合并；前后台通力合作。 3 CSS样式分离

　　3.1 CSS分离

　　前面提到过当一个页面需要一个红色的样式时，定义.red { color: #F00; }，然后引用就可以了，而这里说的CSS分离，是一个个不同的CSS文件，由多个不同的页面引用，如一个网站的head样式单独一个文件每个页面都引用。不过，这种做法大家都知道，我也不会单单的说这点，这里想说的CSS重用的概念。

　　人们都知道钱币只有1元、5元、10元，以前还有2元，但是不会出现，4、6、7等等，因为通过前面几个就可以组合使用了。这个道理很简单。那么我们是不是也可以把CSS的属性拆开。这样每当需要哪些就引用什么。

　　如更多

　　.more { display: inline; float: right; margin-right: 10px; color: #F00; font-weight: normal; }

　　而拆分后，

　　，样式为：

　　.fr { display: inline; float: right; }

　　.red { color: #F00; }

　　.fwn { font-weight: normal; }

　　.mr10 { margin-right: 10px; }

　　以上4个类有两个属于通用类(.fr和.fwn)，属性是没有变量的，当需要右浮动和非粗体时就用此两个类。而像此种类别的还有不少，在此列出我平时使用的。

　　.fl { display: inline; float: left; }

　　.fr { display: inline; float: right; }

　　.db { display: block; }

　　.di { display: inline-block; }

　　.cl { clear: left; }

　　.cr { clear: right; }

　　.cb { clear: both; }

　　.fwb { font-weight: bolder; }

　　.fwn { font-weight: normal; }

　　.tdn { text-decoration:: none; }

　　.tdu { text-decoration: underline; }

　　.n1 { text-align: center; }

　　.n2 { text-align: left; }

　　.n3 { text-align: right; }

　　.vm { vertical-align: middle; }

　　.vt { vertical-align: top; }

　　.vb { vertical-align: bottom; }

　　.fa { font-family: Arial; }

　　.mo { font-family: "宋体" ; }

　　.fa1 { font-family: "黑体" ; }

　　.wsn { white-space: normal; }

　　.re { position: relative; }

　　.ov { overflow: hidden; zoom: 1; }

　　这样需要上述的效果时，就可以自由组合的了。样式拆分，有助于精简CSS文件。每个CSS样式的重用性都发挥到极致。后期维护也会轻松多。同时，除了这些类以外，还有颜色，外边距，内间距，这些也是可以单独定义出来的，只是它们的值是变量的。如之前的.mr10 { margin-right: 10px; }

　　说了这些，不难发现，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时，

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

　　.mian w1 { width: 240px; }

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

　　这样，在没有更改的情况下，它依然是宽度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; }

　　及现在的

　　body, dl, dd, h1, h2, h3, h4, h5, h6, p, form, pre, textarea { margin: 0; }

　　ol, ul { margin: 0; padding: 0; }

　　td, th, input { padding: 0; }

　　同时还会定义一些辅助的

　　input,select,textarea,button { vertical-align: middle; border: none; background: #FFF; }

　　br { line-height: 0; font-size: 0; }

　　li{ list-style-type: none; }

　　img { vertical-align: top; border: 0; }

　　ul,ol { list-style: none; }

　　pre { text-align: center; white-spacere-wrap; word-wrap: break-word; }

　　em,i { font-weight: normal; font-style: normal; }

　　table { border-collapse: collapse; ; width: 100%; }

　　td,th { word-wrap: break-word; word-break: break-all; overflow: hidden; }

　　样式重置的目的是为了清除一些浏览器样式不统一的地方。 5.2 通用样式库

　　前面已经展示，这里只说说命名。这些命名是我的习惯，各位可以根据自己的命名标准。我一般使用属性的首字母命名。如float：left，那么这个类就用fl。同理.tdu 就代表.tdu { text-decoration: underline; }。

　　5.3 公共样式库

　　这一块其实和通用库差不多，但是由于其定义的值为变量。如外上边距10px

　　.mt10 { margin-top: 10px; }

　　内下间距10px

　　.pb10 { padding-bottom: 10px; }

　　字体

　　.fa { font-family: Arial; }

　　大小

　　.fz14 { font-size: 14px; }

　　还有行高，左右外边距等等。 5.4 布局样式库

　　这里面定义一些网站的公用版块，页脚、页眉 ，以及网站使用的一些常规布局。

　　还想在说说栅格化布局。倘若使用了栅格化布局，那么每个版块的宽度就是一定范围且是有规律的值。那么就可以在这里定义一系列宽度值了。这里只是强调，至于栅格化布局的始末，我会单独说明。 5.5 按钮、图标、表单库

　　对于网站的图标，可以集中到一张图上，当然这些图标是使用率高的，各频道都会使用的。做法可以参照之前说的CSS Sprites。

　　当若不是BS结构的页面。表单，按钮等也会不多，可以不单独定义。 5.6 模块库

　　收集网站的一些公用的分页、评论等，这里就需要设计、前端、后台通力合作，才能使模块库建立起来。 5.7 私有库

　　听这么名字就知道，是页面所特有的样式。属于微调。也就是一个页面加载上述库之后需要完成的。我相信前面的工作完成后，这块就是小工作了。同时，之前所说的分离，有些地方不适合使用分离样式时，那就需要在每个页面的私有库里定义。

　　6 最后想说的

　　这一设想的完成，最重要的还是反复强调的各人员间的合作。第二点，也就是前端的水平，倘若CSS理解不透彻，对样式分离把握不娴熟也是很难达到理想效果的。

　　其实我现在的水平还是有限的，上升的空间还很大。同时这些观点也是工作中及在前人的肩膀上总结慢慢形成的。这些并不是真理，其中不乏有错误的地方。您在阅读后发现有不合理的地方，欢迎指出。



--------转载

每一种人生都是大家建筑的。