Author: 李丽媛
Date: 2010/6/2
Email: lly219#gmail.com
1
CSS
优化方案
1.1
使用
CSS
优化工具
a)
online CSS Optimizer
;
b)
CSS Formatter and Optimizer
。
解决方案
:选取以上一个工具进行进行优化。
1.2
清理
CSS
在我们写样式的时候,页面的
CSS
在经历几个版本的修改之后,可能有些样式已经用不到了,或许将某些样式
更名了而原来的忘了删除,总之页面中可能存在着一
些无用的样式。这些无用的浪费了一些服务器空间和带宽消耗,也会增大我们的维护成本。
a)
Dust-Me selector
;
b)
Page Speed
;
c)
CSS Redundancy Checker
;
d)
IntelliJ IDEA
;
e)
Expression Web
。
解决方案
:选取以上一个工具进行
CSS
清理。
1.3
在浏览器支持的情况下尽量使用
CSS
选择器
避免为每一个标签都定义
class
。
解决方案
:重构
CSS
,去除不必要的
class
。
1.4
减少
CSS hack
的使用
a)
尽量把浏览器默认值不相同的元素定义出来;
b)
注意
padding
,
margin
,
border
在
width
和
height
中的大小计算;
c)
注意
IE
中最小高度和
img
的使用。
解决方案
:删除不必要的
CSS hack
,然后进行细节修改。
1.5
避免使用内联引用和内部引用,尽量使用外部引用
a)
网页处理速度会更快一些,尤其在有很多网页共用一份
CSS
样式表时;
b)
看上去更加专业,整个网站的配色、细节等做到完全统一,具有一致性,避免内联的像素、色彩等偏差;
c)
方便维护。只要修改一个
CSS
文件,不管你有多少个网页文件,都会以你最新修改的版本为标准,不必进行散弹式修改。
解决方案
:把内联引用和内部引用的
CSS
进行抽取、提出放到外部
CSS
文件中,使用外联引用。
1.6
浏览器兼容
支持主流浏览器:
Firefox
,
IE6
,
IE7
,
IE8
;逐步支持
Chrome
,
Opera
,
Safari
。
解决方案
:在不同浏览器上进行测试,然后逐一修复。
1.7
元素合并
类似
(
background-image: url(/oaweb/img/common/333.png); background-repeat:
repeat-y; background-position: 0px 0px;
)
可合并为(
background
:
url(/oaweb/img/common/333.png)
repeat-y 0 0;
)。
解决方案
:有此类问题的地方进行合并。
1.8
规范命名
a)
id
和
class
命名采用该内容的英文单词或组合命名,并第一个单词小写,第二个单词首个字母大写,如
:newRelease
(最新产品
/new+Release)
;
b)
添加注释;
c)
常用命名规范(参见附件
1
)。
解决方案
:发现不符合要求的进行修改;没有注释或注释不详、不清的地方进行添加或补充、修改。
1.9
抽取出一些常用的
CSS
对于标签可使用
class
组合,不需要把
float:right;
类似这样常用的样式写到一组定义的
CSS
中。
解决方案
:定义一些常用的
CSS
,在样式中去除含有这些常用样式的
style
;最后在用到该样式的标签中加上定义好的被删除的常用样式的
class
。
1.10
注意
class
和
id
的异同,不要滥用
id
是用来进行唯一标示,作为网站中的样式,每个页面样式需要具备一致性。因此,除特定原因外,样式尽量使用
class
。
解决方案
:查看不符合用
class
的标签,改为
id
;反之,改为
class
。
1.11
满足
SEO
OA
当然不需要此项,但是在
eCooe
体验中就在所难免了。
解决方案
:凭经验可适当修改,但毕竟不是这行的专家,可买本书来研究研究。
1.12
恰当的使用
CSS Sprite
不要在每一处需要图片的地方都使用
CSS Sprite
,它的难维护性决定了只适用于做背景图的时候采用;对于图片,还是应该去使用
img
标签。
解决方案
:把使用了
CSS Sprite
,但不用做背景的地方改为
img
标签;反之改为使用
CSS Sprite
。
1.13
避免使用
expression
和
behavior
在页面渲染的过程中,
expression
和
behavior
需要大量的计算,会大量地耗费客户端资源。所以不到迫不得已,请不要使用
expression
和
behavior
。
解决方案
:删除使用了
expression
和
behavior
的地方,改之使用
JavaScript
进行替代。
附件
1
内容 |
命名 |
内容 |
命名 |
||
模块 |
module.css |
主题 |
themes.css |
||
基本共用 |
base.css |
专栏 |
columns.css |
||
布局、版面 |
layout.css |
表单 |
forms.css |
||
文字 |
font.css |
补丁 |
mend.css |
||
打印 |
print.css |
头 |
header |
||
内容 |
content/container |
尾 |
footer |
||
导航 |
nav |
侧栏 |
sidebar |
||
栏目 |
column |
页面外围控制整体布局宽度 |
wrapper |
||
左 |
left/right/center |
登录条 |
loginBar |
||
标志 |
logo |
广告 |
banner |
||
页面主体 |
main |
热点 |
hot |
||
新闻 |
news |
下载 |
download |
||
子导航 |
subNav |
菜单 |
menu |
||
子菜单 |
submenu |
搜索 |
search |
||
友情链接 |
friendLink |
版权 |
copyright |
||
滚动 |
scroll |
标签页 |
tab |
||
文章列表 |
list |
提示信息 |
msg |
||
小技巧 |
tips |
栏目标题 |
title |
||
加入 |
joinUs |
指南 |
guild |
||
服务 |
service |
注册 |
register |
||
状态 |
status |
投票 |
vote |
||
合作伙伴 |
partner |
12 |
font12 |
||
红色 |
red |
浮动清除 |
clear |
||
常见问题 |
faqs |
缩略图 |
screenshot |
||
最新产品 |
newsRelease |
编辑评论 |
editorReview |
||
关键词 |
keywords |
论坛 |
forum |
||
主导航 |
mainNav |
主菜单 |
mainMenu |
||
标签 |
tag |
摘要 |
|