请选择 进入手机版 | 继续访问电脑版
贠老师培训群:150322713    贠老师QQ:767708506

贠老师office培训-excel学习网

 找回密码
 立即注册
点击咨询贠老师
查看: 311|回复: 10

如何精简优化css文件?

[复制链接]

607

主题

604

帖子

1909

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1909
发表于 2016-2-3 18:10:25 | 显示全部楼层 |阅读模式

由于CSS文件加载于网页的头部,所以每位访问者都会下载这些文件。我们会对PHP文件、图片进行优化,而往往忽略了CSS文件。今天我们应该思考这个问题并做点什么。

可以使用 CSS optimizers 来优化CSS, 但是我认为如果你使用下面提到的技巧编写代码时,效率和能力都会得到提高。

优化CSS文件还能节省流量同时提高页面加载速度。

1. 注释

编写CSS时注释显得格外有用,这样协同工作的同事就会理解代码的含义。注释方法有多种,你可以使用如下方法:

/*-------------------*/

/*-----Comment-------*/

/*-------------------*/

同样也可以使用下面的方法:

/*Comment*/

这样能节省20个字符,假设有15个注释,那么就能节省300个字符。

2. 缩写颜色代码

颜色代码用HEX codes定义,它包含6个字符,但是一些情况下可以使用3个字符代替。看下面的例子:

div{ color: #ffffff; } /* Shortcode: color:#fff; */
div{ color: #ff88ff; } /* Shortcode: color:#f8f; */
div{ color: #f8f7f2; } /* No shortcode possible */
3. 合并元素

例如,如果有一堆h2 h3 和 h4这样的元素,而他们都有相同的属性,只有个别属性不同,那么就可以按如下方法书写:

h2, h3, h4{
padding:0 ;
margin:0 ;
color:#333;
letter-spacing:.05em;
word-spacing:0.1em;
}
h2{  font-size:1.2em; }
h3{  font-size:1.1em; }
h4{  font-size:1em; }
这样就合并了相同属性的元素,同时声明了不同的字体大小属性。能节省大量的空间。

4. 值为0时省略Out Px/Em/%

0并不需要Px,Em和百分号。当你的值为0时(我想你会用到),省略单位能节省一倍的字符。

div{ padding: 0px 5px 5px 10px; }

/* 简写: padding: 0 5px 5px 10px; */


5. 合并属性

一些属性如padding, margin 与border可以分开写。例如:padding-top, padding-right, padding-bottom 和 padding-left。

如果可能,合并之,即容易编写又节省空间。

div{
padding-left:0 ;
padding-top:50px;
padding-bottom:23px;
padding-right:4px; }
/* 简写: padding:50px 4px 23px 0; */

如果上下值相同,左右值相同,可以这么写:

div{
padding-top:5px;
padding-bottom:5px;
padding-left:0 ;
padding-right:0px; }
/* 简写: padding:5px 0; */

6. 明智的选择Classes/ID

选择的Classes,ID名称尽量简短、易懂,有含义。

避免选择诸如“HeaderMiddleLeftCategories”这样的名称,可以用“h-cats“代替。这样能节省大量的字符。

7. 清理CSS文件以节省空间

用CSS建站时,写好的代码可能起作用,也可能不起作用,还占用着不少的空间。应通篇检查CSS文件中的错误与无效代码以节省空间。

8. 删除选择器中最后一个属性的分号

这是我在使用CSS compressor 发现的技巧,看看这个例子:

body{
background:#ccc;
color:#333; }
/* Shortcode: color:#333 */

看到了吗,我删除了最后一个分号。也许效果并不明显,但是积少成多啊,50个选择器就是50个字符。

9. 删除没用的空格与回车

可能你会删除所有的空格与回车,因为他们会占据一个字符。但这样做的问题是破坏了CSS的结构,降低了可读性。

我在优化CSS文件时通常不这么做,因为结构对我来说更重要。这里有一个折中的办法,在网站上使用不含回车与空格的文件。而本地保存含回车与空格的文件,这样编辑起来就很方便了。

结束语

如果想全面优化CSS文件,我建议使用CSS compressor,这样你能自己学到上面这些技巧,也能提高编写速度与CSS代码的质量。


想要了解更多更全面的web前段知识,css样式,html教程,数据库教程,word教程,excel教程等等,就到excel学习网www.excelxue.com


回复

使用道具 举报

0

主题

842

帖子

6

积分

注册会员

Rank: 2

积分
6
发表于 2016-3-7 17:44:32 | 显示全部楼层
一下子解决了我工作当中的难题,谢谢楼主,非常感谢!
回复 支持 反对

使用道具 举报

3

主题

985

帖子

67

积分

注册会员

Rank: 2

积分
67
发表于 2016-3-14 22:38:56 | 显示全部楼层
顶楼主,帮你顶个贴,我挣个积分
回复 支持 反对

使用道具 举报

0

主题

942

帖子

50

积分

注册会员

Rank: 2

积分
50
发表于 2016-3-18 17:51:07 | 显示全部楼层
这个资料非常不错,好东东!
回复 支持 反对

使用道具 举报

0

主题

700

帖子

57

积分

注册会员

Rank: 2

积分
57
发表于 2016-3-25 19:21:14 | 显示全部楼层
能再解释的细节一些吗,具体的
回复 支持 反对

使用道具 举报

2

主题

916

帖子

87

积分

注册会员

Rank: 2

积分
87
发表于 2016-7-8 12:18:54 | 显示全部楼层
不错的平台,以后需要经常光顾!
回复 支持 反对

使用道具 举报

0

主题

902

帖子

45

积分

注册会员

Rank: 2

积分
45
发表于 2016-12-19 20:45:57 | 显示全部楼层
写的不错,支持一下哟
回复 支持 反对

使用道具 举报

0

主题

942

帖子

50

积分

注册会员

Rank: 2

积分
50
发表于 2017-5-3 11:52:47 | 显示全部楼层
先收藏再学习,谢谢啦!
回复 支持 反对

使用道具 举报

3

主题

995

帖子

53

积分

注册会员

Rank: 2

积分
53
发表于 2017-9-4 12:33:10 | 显示全部楼层
谢谢您的分享!
回复 支持 反对

使用道具 举报

2

主题

1048

帖子

156

积分

注册会员

Rank: 2

积分
156
发表于 2018-10-10 17:24:40 | 显示全部楼层
不错的平台,以后需要经常光顾!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



陕ICP备15003731号  

贠老师培训 GMT+8, 2018-11-18 18:47 , Processed in 0.240306 second(s), 33 queries .

快速回复 返回顶部 返回列表