前端优化方案-CSS 优化方案

Author: 李丽媛

Date: 2010/6/2

Email: lly219#gmail.com

<!-- [if !supportLists]-->1 <!-- [endif]-->CSS 优化方案

<!-- [if !supportLists]-->1.1 <!-- [endif]-->使用 CSS 优化工具

<!-- [if !supportLists]-->a) <!-- [endif]-->online CSS Optimizer ；

<!-- [if !supportLists]-->b) <!-- [endif]-->CSS Formatter and Optimizer 。

解决方案 ：选取以上一个工具进行进行优化。

<!-- [if !supportLists]-->1.2 <!-- [endif]-->清理 CSS

在我们写样式的时候，页面的 CSS 在经历几个版本的修改之后，可能有些样式已经用不到了，或许将某些样式 更名了而原来的忘了删除，总之页面中可能存在着一 些无用的样式。这些无用的浪费了一些服务器空间和带宽消耗，也会增大我们的维护成本。

<!-- [if !supportLists]-->a) <!-- [endif]-->Dust-Me selector ；

<!-- [if !supportLists]-->b) <!-- [endif]-->Page Speed ；

<!-- [if !supportLists]-->c) <!-- [endif]-->CSS Redundancy Checker ；

<!-- [if !supportLists]-->d) <!-- [endif]-->IntelliJ IDEA ；

<!-- [if !supportLists]-->e) <!-- [endif]-->Expression Web 。

解决方案 ：选取以上一个工具进行 CSS 清理。

<!-- [if !supportLists]-->1.3 <!-- [endif]-->在浏览器支持的情况下尽量使用 CSS 选择器

避免为每一个标签都定义 class 。

<!-- [if gte vml 1]><v:shapetype id="_x0000_t75" coordsize="21600,21600" o:spt="75" o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe" filled="f" stroked="f"> <v:stroke joinstyle="miter"/> <v:formulas> <v:f eqn="if lineDrawn pixelLineWidth 0"/> <v:f eqn="sum @0 1 0"/> <v:f eqn="sum 0 0 @1"/> <v:f eqn="prod @2 1 2"/> <v:f eqn="prod @3 21600 pixelWidth"/> <v:f eqn="prod @3 21600 pixelHeight"/> <v:f eqn="sum @0 0 1"/> <v:f eqn="prod @6 1 2"/> <v:f eqn="prod @7 21600 pixelWidth"/> <v:f eqn="sum @8 21600 0"/> <v:f eqn="prod @7 21600 pixelHeight"/> <v:f eqn="sum @10 21600 0"/> </v:formulas> <v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect"/> <o:lock v:ext="edit" aspectratio="t"/> </v:shapetype><v:shape id="_x0000_i1025" type="#_x0000_t75" style='width:399pt; height:300pt'> <v:imagedata src="file:///C:\Users\Vanessa\AppData\Local\Temp\msohtmlclip1\01\clip_image001.png" mce_src="file:///C:\Users\Vanessa\AppData\Local\Temp\msohtmlclip1\01\clip_image001.png" o:title=""/> </v:shape><![endif]--><!-- [if !vml]--><!-- [endif]-->

解决方案 ：重构 CSS ，去除不必要的 class 。

<!-- [if !supportLists]-->1.4 <!-- [endif]-->减少 CSS hack 的使用

<!-- [if !supportLists]-->a) <!-- [endif]-->尽量把浏览器默认值不相同的元素定义出来；

<!-- [if !supportLists]-->b) <!-- [endif]-->注意 padding ， margin ， border 在 width 和 height 中的大小计算；

<!-- [if !supportLists]-->c) <!-- [endif]-->注意 IE 中最小高度和 img 的使用。

解决方案 ：删除不必要的 CSS hack ，然后进行细节修改。

<!-- [if !supportLists]-->1.5 <!-- [endif]-->避免使用内联引用和内部引用，尽量使用外部引用

<!-- [if !supportLists]-->a) <!-- [endif]-->网页处理速度会更快一些，尤其在有很多网页共用一份 CSS 样式表时；

<!-- [if !supportLists]-->b) <!-- [endif]-->看上去更加专业，整个网站的配色、细节等做到完全统一，具有一致性，避免内联的像素、色彩等偏差；

<!-- [if !supportLists]-->c) <!-- [endif]-->方便维护。只要修改一个 CSS 文件，不管你有多少个网页文件，都会以你最新修改的版本为标准，不必进行散弹式修改。

解决方案 ：把内联引用和内部引用的 CSS 进行抽取、提出放到外部 CSS 文件中，使用外联引用。

<!-- [if !supportLists]-->1.6 <!-- [endif]-->浏览器兼容

支持主流浏览器： Firefox ， IE6 ， IE7 ， IE8 ；逐步支持 Chrome ， Opera ， Safari 。

解决方案 ：在不同浏览器上进行测试，然后逐一修复。

<!-- [if !supportLists]-->1.7 <!-- [endif]-->元素合并

类似

（ 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; ）。

解决方案 ：有此类问题的地方进行合并。

<!-- [if !supportLists]-->1.8 <!-- [endif]-->规范命名

<!-- [if !supportLists]-->a) <!-- [endif]-->id 和 class 命名采用该内容的英文单词或组合命名，并第一个单词小写，第二个单词首个字母大写，如 :newRelease （最新产品 /new+Release) ；

<!-- [if !supportLists]-->b) <!-- [endif]-->添加注释；

<!-- [if !supportLists]-->c) <!-- [endif]-->常用命名规范（参见附件 1 ）。

解决方案 ：发现不符合要求的进行修改；没有注释或注释不详、不清的地方进行添加或补充、修改。

<!-- [if !supportLists]-->1.9 <!-- [endif]-->抽取出一些常用的 CSS

对于标签可使用 class 组合，不需要把 float:right; 类似这样常用的样式写到一组定义的 CSS 中。

解决方案 ：定义一些常用的 CSS ，在样式中去除含有这些常用样式的 style ；最后在用到该样式的标签中加上定义好的被删除的常用样式的 class 。

<!-- [if !supportLists]-->1.10 <!-- [endif]-->注意 class 和 id 的异同，不要滥用

id 是用来进行唯一标示，作为网站中的样式，每个页面样式需要具备一致性。因此，除特定原因外，样式尽量使用 class 。

解决方案 ：查看不符合用 class 的标签，改为 id ；反之，改为 class 。

<!-- [if !supportLists]-->1.11 <!-- [endif]-->满足 SEO

OA 当然不需要此项，但是在 eCooe 体验中就在所难免了。

解决方案 ：凭经验可适当修改，但毕竟不是这行的专家，可买本书来研究研究。

<!-- [if !supportLists]-->1.12 <!-- [endif]-->恰当的使用 CSS Sprite

不要在每一处需要图片的地方都使用 CSS Sprite ，它的难维护性决定了只适用于做背景图的时候采用；对于图片，还是应该去使用 img 标签。

解决方案 ：把使用了 CSS Sprite ，但不用做背景的地方改为 img 标签；反之改为使用 CSS Sprite 。

<!-- [if !supportLists]-->1.13 <!-- [endif]-->避免使用 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	摘要	summary
商标	branding	法律声明	legal
网站信息	siteInfo	信誉	credits