由于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文件时通常不这么做,因为结构对我来说更重要。这里有一个折中的办法,在网站上使用不含回车与空格的文件。而本地保存含回车与空格的文件,这样编辑起来就很方便了。
10.不需要给背景图片路径加引号
为了节省字节,我建议不要给背景图片路径加引号,因为引号不是必须的。例如:
background:url("images/***.gif") #333;
可以写为
background:url(images/***.gif) #333;
结束语
如果想全面优化CSS文件,我建议使用CSS compressor,这样你能自己学到上面这些技巧,也能提高编写速度与CSS代码的质量。
如果你又其他的技巧,那么,欢迎留言。
分享到:
相关推荐
C#代码精简优化技巧总结,主要是开发过程中的代码优化技巧
PHP实例开发源码—CSS精简优化工具.zip PHP实例开发源码—CSS精简优化工具.zip PHP实例开发源码—CSS精简优化工具.zip
基于PHP的CSS精简优化工具.zip
基于PHP的CSS精简优化工具源码.zip
WIN10专业版64位22H2正式版适度精简母盘NTLite精简配置文件 WIN11专业版64位22H2正式版适度精简母盘NTLite精简配置文件
深度论坛的工具.对精简XP非常有效.单程序文件无需安装,绿色体积小.使用后可清除1G多的系统盘文件,优化功能也非常实用和强大.
第四步,在Firefox浏览器中打开我们要优化的页面(本地的页面也可以),点击右上角的firebug(有个小蜜蜂图标),打开firebug工具窗口,我们会看到在工具选项中我们有一个 CSS Usage工具的按钮。 首先我们来分析最...
PHP实例开发源码—CSS精简优化工具.zip
css 精简模版
[工具查询]CSS精简优化工具 1.0_csstip.zip
如果在用CSS设计布局时遇到BUG,请认真阅读以下内容,非常容易记忆的。
XP精简优化程序,系统加速,让你的XP飞起来
本文里面, 我们为大家介绍介绍两个CSS代码精简工具和相关的一些CSS代码精简教程. ...CleanCSS 是一个免费的CSS 精简压缩工具,通过这个在线工具,可以将你的CSS文件压缩、优化成更精简,这将大大提高你的网站的载入速
VB6.0精简版安装文件VB6.0精简版安装文件VB6.0精简版安装文件
Nero Burning ROM 16.0.11.0 Platinum 精简优化版 Nero Burning ROM是德国ahead公司出品的一款非常出色的刻录软件,也是全球应用最多的光盘刻录软件。支持数据光盘、音频光盘、视频光盘、启动光盘、 硬盘备份以及...
搜狗拼音输入法6.7i(0747)v2大水牛精简优化版-大水牛最后版 最后的版本 无后门 可以同步词库
AD10 精简版 亲测可用 一键安装 带 和谐 文件 安装包仅135M大小
基于官方版微信修改优化,请大家放心下载! 优化细节,修复一些bug。 去除大量无用链接,精简软件大小! 去除图片推送广告,节省更多流量! 保存官方版各项功能,清爽更实用!
EmEditor Pro 10.06 精简优化版,不用破解,自动安装。
公司精简人员优化方案(一-).pdf