浅谈大型网站中CSS样式表的构建.docVIP

浅谈大型网站中CSS样式表的构建 　　摘要：CSS样式表能够让网页内容与外观控制相分离，代码更加简洁。但在大型网站中，功能模块较多，模块页面风格不尽相同，往往需要多个CSS样式表文档进行控制，本文主要研究如何在大型网站中科学有效地组织编写CSS文档，使得页面加载更加高效，维护更便捷。 　　关键词：CSS 大型网站 构建 　　中图分类号：TP393092 文献标识码：A文章编号：1009-5349（2016）13-0244-01 　　CSS的出现不但弥补了HTML对元素属性控制的不足，同时通过外联式CSS代码写法，网页内容与样式进行了分离，实现了两者的“解耦和”，因此使得样式内容可以被重复使用，大大提高网站开发和后期维护的效率。 　　对于中小型网站来说，由于页面数量比较少，一般只需要1到3个CSS样式表文档，即可完成对整个网站的样式控制，但当网站到达一定规模以后，包含的模块也越来越多，每个模块中页面风格各不相同。如果CSS代码过于集中，会造成代码的不必要调用。而文档过多，又会造成管理、维护、重构不方便。科学有效地对整个站点的样式代码进行架构，合理地进行文档组织与调用，能够让文档加载更加流畅，后期维护更加便捷。 　　一、样式表构建与编写优化原则 　　1.标准化原则 　　随着手机平板等移动端设备的增多，对CSS样式表的编写，提出了更严格的要求。只有代码编写规范化，标准化，才能更好地兼容各种不同的设备。 　　标准化主要体现在：属性书写顺序；选择器命名规则；页面结构控制；文档命名与组织规则。 　　2.重构性强原则 　　网站的定制化发展，要求页面在针对不同时间不同人物时，能够呈现出不同的风格。CSS文档的构建，必须充分考虑页面的重构性。网站重构不是一种技术，不是单纯的css+div，更不是标准，是一种思想，是一种理念。真正的页面重构应该包括页面结构、交互行为、内容表现三层次的分离以及优化，行内分工优化，以及以数据及体验为主导的交互优化。 　　3.模块化原则 　　以功能块为单位进行程序设计，最后通过模块的选择和组合构成最终产品。这种软件开发思想目前也被运用在了网站前端开发中。如我们可以提取公用功能模块，如导航、版权信息等，实现部分公用模块的复用。 　　4.求简去繁原则 　　CSS代码本身并不难，但在大型项目中，如果编写不注意就会变得很多很乱。特别是团队开发时，问题就会更严重，因此高效简洁易懂也是文档编写追求的原则。主要需要注意以下几点：不影响页面的布局；去掉不必要的样式；合并相同的样式；尽可能缩小样式的大小。 　　二、样式表构建优化手段 　　1.文档组织优化 　　大型网站样式表文档组织没有固定的规则，针对不同情况，有几个基本策略可供参考： 　　（1）基于页面结构。我们可以针对页面结构比较相近的页面，创建一个CSS样式表文件进行控制。将默认字体、链接等共享属性，单独写入一个全局CSS文档。如global.css、index.css、content.css、list.css。 　　（2）基于页面布局。如果多张页面中有相同外观的元素，如网站的导航条，底部版权，头部广告，侧栏等。可以针对这些元素，单独创建CSS文档加以控制。 　　（3）基于标记元素。如果整个网站中不同页面中有很多表单、标题、项目列表等元素的外观较为统一，可以单独创建一个样式表文档，控制常用元素的外观，需要的页面中加以调用即可。 　　（4）基于网站功能模块。可以针对同一功能模块的相关页面，设计一个样式表文档控制外观，如订单相关、管理员后台，新闻搜索与显示等。命名为orders.css、admin.css、shownews.css等。 　　2.Reset优化 　　许多网站的reset.css的文件贪大贪全，造成代码过于繁杂。笔者认为，reset.css重置文件的编写应根据自身站点进行重置。有些地方可以适当精简。如有些不常用的标签，不需要重置。 　　3.HTML标签的语义化 　　“语义化”指的是计算机在更少的人为设定解释的情况下能?蜓芯亢褪占?信息，让网页直接能够被浏览器理解，提升执行效率。HTML 标签语义化是让大家直观的认识标签（markup）和属性（attribute）的用途和作用，如Hx系列一看就明白是标题，HTML5中更是增加了许多语义标签，如header、article、aside等。 　　4.合理使用嵌入式样式 　　在一些较为重要，或访问次数相当多等页面（如首页、订购页、详情页等）中，可以考虑使用嵌入式CSS代码，既能防止加载过多等无用代码，在带宽较为紧张的情况下也能让重要的内容可以正常显示。 　　三、结语 　　大型项目的CSS样式架构经常需要在追求灵活还是严谨、高效还是可扩展等问题上纠结，解决方法还是需要具体问题