Welcome, Old Sport!

尝试微调优化你的CSS代码

by ilikecss ON 2014/07/22 2728

最小化微调你的CSS文件优化网站速度最关键有效的方法就是减少HTTP请求,压缩大小,再细一点就是靠我们如何优代码了,优化代码就是看我们平时是否养成书写的好习惯。CSS可以通过压缩来大幅度减少大小,然而在书写的时候有好的优化习惯还可以帮你进一步减少CSS文件大小。

CSS基本优化理念就是尽量少写代码,删除多余的空隙,一些样式可以多种写法但效果不变。本文将帮助你理解微观优化,以及如何微小的处理。

1. 用最短值书写颜色样式

.text { background-color: rgb(255,255,255);}
.text { background-color: #ffffff;}
.text { background: #fff;}

2. 整理重复代码, 权重相同的CSS请检查是否有重复出现,整合到一起。

3. 尽可能使用简写语法

p {
	font: bold italic 12px/1 Arial, Helvetica, sans-serif;
	background: #fff url(xxx.jpg) no-repeat;
	margin: 10px 10px 10px 10px; /* 上右下左 */
	padding: 10px 10px 10px 10px; /* 上右下左 */
	border: 1px solid #F00;
}

4. 删除多余的0

p {
	padding: .1em; /* (0.1em) */
        font-size: .2em; /* (0.2em) */
}

5. 0值后面可以省略单位

p {
	padding: 0; /* 0px */
}

6. 最后一个样式可以省略分号,但不建议大家使用,出错率较高。

p {
	line-height:12px;
	font-size: 12px
}

7. 删除不必要的空白区域,CSS压缩后就是这个效果,也是减少大小最有力的一个步骤。

8. 验证一下你的CSS,CSS出错也会导致浏览器读取障碍影响速度。

以上优化的方法因人而异,比如CSS压缩会导致你的代码阅读非常不友好,CSS里的注释也可以从优化的角度里全部删除,但这样又降低了制作者的水准。CSS的优化需要制作者长期养成良好书写习惯,这样才能事半功倍。

6条评论
  1. #1

    金刚禅狮子吼说道:

    这个是你上传的??怎么ID不是你的?因为下载的素材里是你的名字~
    http://www.zcool.com.cn/gfx/ZMzE5ODEy.html

  2. #2

    大肥羊说道:

    :mrgreen: 有工具检查容易点。




TOP