合理设计CSS代码结构及优化

为了便于维护,最好把样式表划分为几大块。这包括应用于body标记的、应该由站点上所有元素继承的样式。接下来是可能需要所有的全局reset样式,然后是链接、标题和其他元素。

完成一般样式后开始处理更特殊的样式和辅助样式,随着在样式表中的移动,我们在一层样芽构建另一层样式,处理的样式越来越特殊。处理完页面结构元素之后,我们把注意力转到与特定页面相关的组件上。最后,在文档的底部处理覆盖和例外情况。整个文档的结构像下面这样:

1. 一般性样式

* 主体样式
* reset样式
* 链接
* 标题
* 其他元素

2. 辅助样式

* 表单
* 通知和错误
* 一致的条目

3. 页面结构

* 标题、页脚和导航
* 布局
* 其他页面结构元素

4. 页面组件

* 各个页面

5. 覆盖

这里使用一种风格统一的大注释块分隔每个部分。

/* @group general styles
——————————————————————————————————————————————*/

/* @group helper styles
——————————————————————————————————————————————*/

/* @group page structure 
——————————————————————————————————————————————*/

/* @group page components  
——————————————————————————————————————————————*/

/* @group overrides
——————————————————————————————————————————————*/

当然并非所有东西都能自然地分成定义明确的块,这需要开发人员进行判断。请记住,代码的分隔越细致、越合理,就越容易被理解,而且能够更快地换到要寻找的规则。

删除注释和优化样式表
在线CSS优化器:
www.cssoptimiser.com

减小文件大小最好方法可是能启用服务器端压缩。如果使用Apacha服务器,那么应该安装mod_gzip或mod_defate。所有现代浏览器都可以处理用GZIP压缩的文件并进行即时解压。这些Apache模块探测浏览器是否能够处理这种文件,如果可以,就发送压缩的版本。服务器端压缩能够将HTML和CSS文件减小大约80%,来减少对带宽的占用,加快页面的下载速度。

发表评论

电子邮件地址不会被公开。 必填项已用*标注