网站提速系列1:编写更加高效的CSS
15
03 月

网站提速系列1:编写更加高效的CSS

#1 编写自定义的CSS和HTML

和Adobe或其他软件的直接输出相比,自定义的CSS和HTML能减少DOM元素,剔除多余的html标签。

下面是一个页脚的例子,关于列表的使用

<div class="example-footer-1">
<ul>
<li><a href="#"> my website 2011</a></li>
<li><a href="#">privacy statment</a></li>
<li><a href="#">sitemap</a></li>
<li>site created by <a href="#">my amazing company</a></li>
</ul>
</div>
.example-footer-1 {
padding:20px;
border-top:solid 1px #cccccc;
border-bottom:solid 1px #cccccc
}
.example-footer-1 ul {
list-style-type:none;
padding:0;
margin:0}
.example-footer-1 ul li {margin-right:3px; display:inline}

下面是另一种写法

<div class="example-footer-2">
<p>
<a href="#"> my website 2011</a>
<a href="#">privacy statment</a>
<a href="#">sitemap</a>
site created by <a href="#">my amazing company</a>
</p>
</div>
.example-footer-2 {
padding:20px;
border:solid 1px #ccc;
border-width:1px 0
}
.example-footer-2 p {padding:0;margin:0}
.example-footer-2 a {margin:0 3px 0 0}

点击预览:http://phat-reaction.com/speckyboy-test.html

上面两个例子的区别:

1)分别设置上下borderborder-topborder-bottom);设置全部border,然后通过width值来设定。

2)颜色用#ccc比#cccccc减少三个字符

3)在一个非列表里不实用li列表,只用<a>标签就好了,并把<ul>标签换成<p>。

4)margin-right:3px改成margin:0 3px 0 0,这里并没减少字符长度,如果多个margin设定就能看出优越性了

#2 清除不必要的空格、制表符和回车

在W3C验证中,会推荐我的css采用“一行到底”的写法,例如:

.example {
padding : 20px;
border : 1px solid #ccc;
border-width : 1px 0px;
}

90个字符,4个回车,3个制表符,如果你想提高网站的访问数度,可以这样写:

.example{padding:20px;border:solid 1px #ccc;border-width:1px 0;}

64个字符

类似的还有很多,为了节省时间,可以用文本编辑器或IDE来批量的查找替换以下内容:

" {" 替换成 "{"
" }" 替换成 "}"[1]
": " 替换成 ":"[1]
" :" 替换成 ":"
" ;" 替换成 ";"[1]
"; " 替换成 ";"[1]
", " 替换成 ","
" 0px" 替换成 "0"
" 0em" 替换成 "0"

[1]表示该项重复2到3次

需要特别注意的是,CSS瘦身工具也没有你手动处理的效果好

#3 清除每个CSS语句结尾不必要的分号

例如:

.example{padding:20px;border:solid 1px #ccc;border-width:1px 0;}

变成

.example{padding:20px;border:solid 1px #ccc;border-width:1px 0}

一个CSS文件里语句会非常的多,可以使用批量替换,即把”;}”替换成”}”

#4 学习正确的CSS

看到这条,你可能觉得多此一举,CSS谁不会啊,但请你把这条看完先.很多人并不真正懂CSS的原理,都是在网上东看点西看点.下面看个例子:

li {list-style-type:none}

这个属性不应该在列表条目上,应该这样写:

ul {list-style-type:none}

下面再看个很2的例子:

#header {width:auto; margin: 0 auto;}
#footer {margin: 0 0px 0 0px; padding:0 0 0px 0}
#sidebar {
background-image: url(images/image.png);
background-position: center top;
background-color:transparent;
background-repeat: no-repeat
 }

#header 没有指定固定宽度,那么margin:auto居中完全没有用

#footer 可简洁写法: margin:0;padding:0;

#sidebar 简洁写法: background:transparent url(images/image.png) no-repeat center top;

这种例子在各个网站上都很常见,一般来至不懂CSS的coder和不懂CSS的前端编辑器

#5 当心浪费的CSS Resets

好些人喜欢在CSS前Resrt一下来获得一个干净的环境,这个方法虽然不错,但有时反而会成为一种误导.
下面是mashable.com上的, defined by Richard Clarke

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

footer, nav, section, label, dfn, cite, kbrd, code, samp, b, i, strong, em, canvas, tr, thead, tfoot, tbody, span, var & div 不应该出现在这里,各个浏览器中他们都已近预置了下面这些属性:no padding, no margin, no background, no borders, no outline, 而且更不必要设置字体大小.

sup, smallsub 一般来说不该 font-size:100% ,默认的小字体更能凸显标签的用处.

supsubvertical-align: baseline;更是滑稽,sup本来就该在右上角,sub在左下角.

以上等等不光浪费空间,还给浏览器渲染增加了很大的负担.

#6 Gzip 压缩

Gzip和我们平时用的压缩类似,它能为你节约网络数据传输宽带.

如果你的服务器允许,如Apache,Tomcat,lighttp或IIS,都可以gzip压缩你的CSS.但要注意有些空间商会关闭Gzip功能,因为这样会占用更多的系统资源,也有可能让你额外付费来开通Gzip.

gzip’ing有不同的等级,人们都爱用最大压缩量的’_9’或’level 9′,但这样同时会占用更多的系统资源.

注意:并不是所有的浏览器都支持Gzip,所以还是要把CSS文件本身的压缩放在第一位.

#7 把CSS样式表放在THML头部

CSS样式表放在THML头部很重要,这样它才能快速被下载并运用到全页面.如果不是迫不得已,不要在HTML文件内不置style样式.

#8 使用同一个外置样式表

使用外部样式表的好处是可以被Gzip和缓存在本地,若果是内嵌样式表,它会在页面被请求时重新加载,拖慢网站响应速度.

#9 [email protected]

推荐阅读:http://www.blueidea.com/tech/web/2009/6666.asp

#10 尽量少使用子选择器

一些设计者喜欢使用大量子选择器来样式化元素,下面再看一下前面的例子:

.example-footer-1 {
padding:20px;
border-top:solid 1px #cccccc;
border-bottom:solid 1px #cccccc
}
.example-footer-1 ul {list-style-type:none;padding:0;margin:0}
.example-footer-1 ul li {margin-right:3px; display:inline}

(回车增加可读性,下同)
如果修改为下面样式,效率会大大提高:

ul {list-style-type:none;padding:0;margin:0}
li {margin-right:3px; display:inline}
.example-footer-1 {
padding:20px;
border-top:solid 1px #cccccc;
border-bottom:solid 1px #cccccc
}

这样浏览器就不必在寻找.example-footer-1及其子选择器,从而效率会提高。

1 条评论

  1. 软件盒子2012 年 03 月 15 日下午 7:11 回复

    高效简洁