现在的位置: 主页 > 在线留言 > 文章正文

浅析网站开发CSS架构

作者:成都昌德装饰工程有限公司 来源:www.cdchangde.com 发布时间:2017-09-02 10:17:12
浅析网站开发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; }

  说了这些,不难发现,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时,<div class=”w1”></div>

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

  .mian w1 { width: 240px; }

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

  这样,在没有更改的情况下,它依然是宽度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; table-layout: fixed; 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理解不透彻,对样式分离把握不娴熟也是很难达到理想效果的。

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

  对于现在工作想说的:我这并不是说这套模式就应该到现在网站开发中,因为开发模式的改版,意味着变革,变革这东西,向来阻力大。且不见得就是对的。而我现在在工作中,其实已经使用了CSS分离 及合并的方法,对工作效率的提升,自己有切身的感受到,只是没有应用单独库的概念。样式中,通用库,公共库,重置等都是在一个页面中。

  而一旦使用这套模式,在前期,怎样建立好这套样式库,还是需费一些精力的。

  这里是对平时工作中一些零散理论,技巧的一个总结,由于文字功力的限制,会有表达不当之处。

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:天门SEO http://tianmen.4567w.com

上一篇:武汉肥猫科技|有颜值又有见地的网站总是经久不衰 下一篇:最后一页