浅析网站开发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的属性拆开。这样每当需要哪些就引用什么。

　　如<span class=”more”>更多</span>

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

　　而拆分后，

　　<div class=”fr red fwn mr10”>更多</div>，样式为：

　　.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; }