高效CSS开发核心要点摘录

做网站的,我们都知道尽量减少请求数,压缩CSS代码量,使用高效CSS选择符等方式可以来提高网站的载入速度和访问速度,也就是优化网站的性能

下面分析了一些CSS的书写方式,很多都是我们知道并且正在使用的,这里记录一下,提醒自己以后写CSS的时候尽量从这些方面出发来使用,对于CSS的性能提升有很大的帮助,对于你自己写出来的代码也更加的靠谱了。

本文摘录之“高效CSS开发核心”,一些我认为是已经不需要用规则来约束的就不再啰嗦了,感兴趣的读者可以去看全文。

1.把CSS文件放在<head>中,避免使用@import(因为使用了import之后就相当于把另外的CSS放在了标签的底部)

2.避免使用CSS表达式,CSS表达式只在IE中有用,他执行的次数随着页面的缩小、放大和滚动等都会出现变化。

3.HTML标签使用小写

<!-- Not recommended -->
<A HREF="/">Home</A> 
<!-- Recommended -->
<img src="google.png" alt="Google">

4.使用UTF-8编码

html中: <meta charset="utf-8"> css中: @charset "utf-8";

5.不要使用实体引用

比如“>”尽量写成”&gt;”

6.省略零值后面的单位和省掉起始的0值

margin: 0; padding: 0; font-size: .8em;

7.使用高效的CSS选择符

8.避免tag+id或者class+id

button#goButton {...};----->>#goButton .fundation#testIcon {...};----->>#testIcon

9. 关于tag+class

button.indented {...}----->>.button-indented {...}

程序员们经常会给某个 Class 前面加上标签名称(Tag Name),以更精确且快速的定位该节点,但是这样往往效率更差。因为页面上的 class 在全局范围内来讲应该是唯一的,用唯一的 Class 名称来定位一个节点往往比组合定位更加快捷。事实上,这种做法也可以避免由于开发修改页面元素的类型(Tag)而导致的样式失效的情况,做到样式与元素的 分离,两者独立维护。

10. 尽量避免后代选择器

就是说要多用子类选择器这种方式(IE6不支持),“>”

treehead treerow treecell {...} ----->> treehead > treerow > treecell {...}

Descendant 选择器是耗时相对高的选择器,通常来讲,它在 CSS 里的使用应该是尽量避免的,如果能用 child 选择器替代就应该尽量这样去做。

11. 发布之前一定要进行压缩

可使用YUI Compressor或类似软件进行压缩后再发布。

12. 省略嵌入资源的协议

即可避免混合内容问题(mixed content issues)也可以缩减文件大小,这个倒是可以尝试,不过不建议,有些可能看不懂。

<!-- Not recommended --> 
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script> 
<!-- Recommended --> 
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script> 
/* Not recommended */
.example { background: url(http://www.google.com/images/example); } 
/* Recommended */ 
.example { background: url(//www.google.com/images/example); }

13. 文件结构

我觉得这个倒是可以有,不过如果是项目的话,我怕设计到的CSS文件太多,造成管理不便,如果是内容较少的情况下可以用这种方式。

由于图像等资源一般只有CSS文件使用,故可将图像文件夹放到CSS文件同级目录,这样就可使用相对路径,节省字节数

input {background: url("images/shadow background.gif");}

14. 文件夹命名

这个推荐使用这种方式,不过有一些主题等是习惯了使用复数了,具体情况具体分析,可以使用尽量用下面这种单数。

通常文件夹会被命名为其所代表的资源的复数形式

images assets fonts

其实大可不必,使用单数形式可以节省许多字节,尤其是当每个项目的结构都类似时

img asset font

对于下面一段包含58字节的代码:

input {background: url("/images/shadow background.gif");}

优化后变为52字节,即10%的压缩:

input {background: url(img/shadow-background.gif);}

如果在使用缩写,则可进一步缩减:

input {background: url(img/shadow-bg.gif);}

如果一个项目有几百行这样的代码,那么就会节省几百字节了。如果站点访问量超大,则可节省数目客观的带宽资源。

15. 滤镜简写

selector { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65); }

filter的版本是IE8以下的,–ms-filter的版本是IE9以上的,YUI会将其压缩为:

selector { -ms-filter:"alpha(opacity=65)"; filter:alpha(opacity=65); }

由于YUI的广泛使用极其社区开发着的强大力量,说明这种写法已经是经过深度测试的写法,可以放心使用。

16 Gzip压缩与CSS书写

这个仁者见仁智者见智,有些人认为从CSS的加载方式(即CSS先确定显示、位置、整体)。

Goolge建议按照字母顺序书写CSS规则,方便维护。其他公司也有自己的规范。从Gzip压缩角度,只要整个文档中的书写顺序保持一致即可,可以提高Gzip压缩比率。

background: fuchsia; border: 1px solid; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; color: black; text-align: center; text-indent: 2em;

17 更少的请求比更小的尺寸重要

文件可以适当的合并,只保留基本的层级即可

<link rel="stylesheet" href="http://css.somedomain.com/reset.css" type="text/css" /> 
<link rel="stylesheet" href="http://css.somedomain.com/global.css" type="text/css" /> 
<link rel="stylesheet" href="http://css.somedomain.com/home.css" type="text/css" />

实际应用中当然不可能做到上面这么多的要点,而且也需要根据项目的差异来做出调整,这里整体上我觉得是可以给我一点启发的,比如不要使用“标签+类名、标签+ID、使用单数的文件结构、把图片放在CSS的同级目录、滤镜的简写、更少的请求。


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流