浅析网站开发CSS架构

1、浅析网站开发CSS架构版本：v1.10文件状态：草稿文件标识：当前版本：V1.10正式发布作 者：Prestonv正在修改完成日期：2010-12-9 TOC o 1-5 h z HYPERLINK l bookmark21 o Current Document 写在前面的3 HYPERLINK l bookmark24 o Current Document 整体阐述3 HYPERLINK l bookmark27 o Current Document CSS样式分离4 HYPERLINK l bookmark30 o Current Document CSS 分离4 HYPERLINK l

2、bookmark34 o Current Document 设计师的配合5 HYPERLINK l bookmark37 o Current Document 前端工程师的功力6 HYPERLINK l bookmark40 o Current Document CSS样式合并6 HYPERLINK l bookmark43 o Current Document CSS分离与合并（组合）6 HYPERLINK l bookmark47 o Current Document CSS架构8 HYPERLINK l bookmark57 o Current Document CSS重置库8 HYPE

3、RLINK l bookmark61 o Current Document 通用样式库9 HYPERLINK l bookmark64 o Current Document 公共样式库9 HYPERLINK l bookmark67 o Current Document 布局样式库10 HYPERLINK l bookmark70 o Current Document 按钮、图标、表单库10 HYPERLINK l bookmark73 o Current Document 模块库10 HYPERLINK l bookmark76 o Current Document 私有库10 HYPERL

4、INK l bookmark79 o Current Document 最后想说的101写在前面的以下内容是平时工作中所积累形成的，其中不乏带有个人感情色彩。在此只 是阐述及归纳。2整体阐述当你是一个从业多年的WEB前端人员，或是开发过大量的页面，就会发现一 个现象，即使不是同一个网站，所定义的CSS中也很多相同的类，当然，不是同 一网站没法合并，倘若是同一个网站，每个频道，或是一个频道的每个页面要都 是一套CSS样式，是不是太浪费了。那么是不是该把这CSS掰开、揉碎好好的说 道说道。CSS架构，这个学术性的名称就被我引用了。在讨论整个CSS架构前，我想先来说说CSS本身。众所周知，CSS的诞

5、生， 就是样式与结构的分离，就代表着精简与重用。在多年前，人们开发网站是，样式都是写在html代码中，维护起来那个繁 琐是不言而喻的，有了 CSS后，当需要定义一个字体颜色时，就可以：.red ( color: #F00; 页面中凡需要字体为红色时，都可以引用，修改起来也就是一步的事情。 同时解放了 html代码。可随着网站内容日益丰富，我们已经不能单单只停留在初级的样式与结构的 分离层面。需要对CSS进行解剖，因为只有深层次的了解它，才能更好的驾驭。在对CSS处理的问题上，各个网站的做法都不尽相同。有整个站点就一个 CSS文件的，一般符合web2.0标准的，如开心网；有分为页眉，页脚，主体不

6、 同部分的；有按个频道页面建立样式的；亦有几个公共样式表，其余视不同页面 建立的。更有所有CSS都放在页面head中的。所有这些，并无正确错误之分，只有是否适合，毕竟一切做法为的都是更为 高效简洁的代码。这里我想说说自己的做法。一个站点CSS文件分为：CSS重置库；通用样式 库；公共样式库；布局样式库；按钮、图标、表单库；模块库；私有库。除了最后一个，其余都是公共的库。这样做虽然是单个页面的连接数有所增浅析网站开发CSS架构 加，但是对于门户型网站，其整体的开发成本会有大大的降低。不过实现这种开 发模式有几个前提，样式分离；样式合并；前后台通力合作。3 CSS样式分离CSS分离前面提到过当一个

7、页面需要一个红色的样式时，定义.red ( color: #F00; ， 然后引用就可以了，而这里说的CSS分离，是一个个不同的CSS文件，由多个不 同的页面引用，如一个网站的head样式单独一个文件每个页面都引用。不过， 这种做法大家都知道，我也不会单单的说这点，这里想说的CSS重用的概念。人们都知道钱币只有1元、5元、10元，以前还有2元，但是不会出现，4、 6、7等等，因为通过前面几个就可以组合使用了。这个道理很简单。那么我们 是不是也可以把CSS的属性拆开。这样每当需要哪些就引用什么。如span class=” more” 更多/span.more ( display: inline;

8、 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)，属性是没有变量的，当需要右 浮动和非粗体时就用此两个类。而像此种类别的还有不少，在此列出我平时使用

9、的。.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: underl

10、ine; .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 (

11、overflow: hidden; zoom: 1; 这样需要上述的效果时，就可以自由组合的了。样式拆分，有助于精简CSS 文件。每个CSS样式的重用性都发挥到极致。后期维护也会轻松多。同时，除了 这些类以外，还有颜色，外边距，内间距，这些也是可以单独定义出来的，只是 它们的值是变量的。如之前的.mr10 ( margin-right: 10px; 说了这些，不难发现，CSS样式越是分离，就可以使每个类重用性发挥到极 最大化，CSS代码就越精简！不过凡事都不是绝对的，所谓此消彼长，当CSS样 式分离的多了，自然html的代码就会增加。如：tab选项卡，每个的宽度是自 适应的，还有定位的出现，那

12、么html的代码就夸张了，且繁琐，不易维护。这 时我们就不能只有CSS分离了；又如一组展示商品页，所有的li左浮动，若在 每处加上的话，显然不合适。从而，并非是所有的地方都适合使用分离独立的样 式。从而需要权衡，而具体该怎么做，如何权衡？说的玄乎点，凭经验，其实， 这确实是一个凭借经验来判断的。3.2设计师的配合不管设计师与前端开发是否是一人，要想使样式的分离功效最大化，设计师 所扮演的角色至关重要。比如区块间的间距，有10像素、15像素、12像素，边框一处是#DADADA， 一处又是#D4D4D4D等，那么独立出的类重用性就大打折扣。设计师在设计页面时，也该有如后台开发人员一样的模块意识，有

13、时不能为 了一处的效果好看些，就独立一处的设计。当然，物极必反，不能全部都统一风 格，还是有精细之处。3.3前端工程师的功力之所以要分离CSS，其目的为的是精简网站的CSS文件，倘若执行者的水平， 也就是功力不够，那么在分离的同时，亦会增加更多的CSS代码，如：不能很好 的使用最简单的代码实现兼容的效果，使用了过多的hack等，反而枉然。从而 对CSS理解透彻，对整站CSS进行架构及对分离权衡，至关重要。4 CSS样式合并说完分离，下面来说合并，似乎这两者有冲突，实际，目的是一致的，都是 为了使CSS精简。CSS样式合并，就是对一些不能分离的样式，如背景图片，将公共的部分合 并，非公共的部分分

14、离独立出来，我常用的是应对于CSS Sprites,看下图urrurr微博页面中对背景图样式进行了合并，倘若不这样，那增加的CSS代码量就 惊人了。当然这种做法，是普通的，也是大家使用最多的。这里想说说另外一种 样式合并。我称它为“组合式”样式。CSS分离与合并（组合）这一观点，也是我使用了样式分离后，慢慢的在项目中发现的。之前说到了CSS通用库，它就似“孙悟空”，跳出三界外，不在五行中。通用类的属性都是 CSS所固有的，非变量的。而还有一些分离出来的类，原先我也是放在通用库中， 如mt10: margin-top:10px; cor_1: #666;而现在我把它分离出通用库，称之为 基本样式

15、库。分离一般使用在那些非模块化的元素，这里说的合并就该是应用于模块化的 元素。这里先跑下题，解释下模块化元素。其实是我没说清楚，我说的模块不是 通常意义上如网站页眉，页脚等，而是页面中的一个特定区块，如按钮、文本框、 全站公用图标，这些模块是不宜使用样式分离的。举个例子：这里我想再引入一个概念栅格化布局，具体什么不多说，只是因为这是个前 提，我通常采用的是24栏宽度950的布局。说这个是解释后面举例中这些数值 的来历。在定义独立的样式时，会定义大量乘40减10的宽度值，如230,190.270， 510 等， TOC o 1-5 h z .w1(width:230px;.w2(width:19

16、0px;.w3(width:270px;那么当有一个层宽度刚好是230时，这个看似完美，其实隐患很多。后期一旦某一天要改变宽度，230改成240， 单改w1的类，那么所有引用它的都会变，显然不行。怎么办，以前我的做法是， 找这个div父层中的类，比如可能是在main层下面，那就再加个样式.mian w1 ( width: 240px; 可是也可能main下有几个层都用到了 w1，而只能改一个。怎么办，放在以 前我会单独的给这个层命名，如side，然后单独定义宽度。其实这种做法离我 要表达的合并的概念很近了。而现在我同样是给这个层命名side，但是不去定 义它的宽度，而是直接这样，在没有更改的情

17、况下，它依然是宽度230，而当有变化时。定 义.sidewidth: 240px; 因为基本样式库在页面引用时在上面，而页面特有样 式在下面，按照CSS的权重，后定义的权重大。这样做，既保证了 CSS样式分离， 对于模块化元素又解除了隐患，同时使得这个模块有了语义化的名称。5 CSS架构在说了这些前提后，就可以来说说我写本文的目的了，CSS的架构。其实关于这点，前辈们又很多的做法，本文的开头提过。对于符合web2.0 的网站，我是只用一个CSS文件，因为风格统一，不管页面有多少，CSS文件可 以控制的非常小，而且高性能，同时页面扩展性也非常好。但要是门户型，就不 适用了。那么就需要一个拆分，也

18、就是架构了。1、CSS重置库2、通用样式库3、公共样式库4、布局样式库5、按钮、图标、表单库6、模块库7、私有库CSS重置库说到这个，从最初级是不定义，到* margin:。； padding:0 一棒子打死，再到 body, div, dl, dt, dd, ul, ol, li, hl, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td ( margin: 0;padding: 0; 及现在的body, dl, dd, hl, h2, h

19、3, 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; bor

20、der: 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; table-layout: fixed; width: 100%; td,th ( word-wrap: break-word; word-break: break-all; overflow: hidden; 样式重置的目的是

21、为了清除一些浏览器样式不统一的地方。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布局样式库这里面定义一些网站的公用版块，页脚、页眉，以及网站使用的一些常规 布局。还想在说说栅格化布局。倘若使用了栅格化布局，那么每个版块的宽度就是 一定范围且是有规律的值。那么就可以在这里定义一系列宽度值