WEB开发网      濠电姷鏁告繛鈧繛浣冲洤纾瑰┑鐘宠壘閻ょ偓銇勯幇鍫曟闁稿鍠愰妵鍕冀閵娧佲偓鎺楁⒒閸曨偄顏柡宀嬬畱铻e〒姘煎灡绗戦梻浣筋嚙濮橈箓顢氳濠€浣糕攽閻樿宸ュΔ鐘叉啞缁傚秹宕滆绾惧ジ寮堕崼娑樺缂佹宀搁弻鐔风暋閻楀牆娈楅梺璇″枓閺呯姴鐣疯ぐ鎺濇晝闁靛牆妫欓蹇旂節閻㈤潧浠﹂柛銊ョ埣楠炴劙骞橀鑲╋紱闂佽宕樼粔顔裤亹閹烘挸浜归梺缁樺灦閿曗晛螞閸曨垱鈷戦柟鑲╁仜婵″ジ鎮楀☉鎺撴珖缂侇喖顑呴鍏煎緞濡粯娅囬梻浣瑰缁诲倿寮绘繝鍥ㄦ櫇闁稿本绋撻崢鐢告煟鎼淬垻鈯曢柨姘舵煟韫囥儳绋荤紒缁樼箖缁绘繈宕橀妸褌绱濋梻浣筋嚃閸ㄤ即宕弶鎴犳殾闁绘梻鈷堥弫鍌炴煕閳锯偓閺呮瑧妲愬Ο琛℃斀闁绘劕妯婇崵鐔封攽椤旇棄鍔ら摶鐐烘煕閺囥劌澧柛娆忕箻閺屽秹宕崟顒€娅g紓浣插亾濠㈣泛顑囩粻楣冩煙鐎涙ḿ绠橀柨娑樼У椤ㄣ儵鎮欓鍕紙闂佽鍠栫紞濠傜暦閹偊妲诲┑鈩冨絻椤兘寮诲☉銏犖╅柕澶堝労閸斿绱撴担绋库偓鍝ョ矓瑜版帒鏋侀柟鍓х帛閺呮悂鏌ㄩ悤鍌涘 ---闂傚倸鍊烽悞锔锯偓绗涘厾娲煛閸涱厾顔嗛梺璺ㄥ櫐閹凤拷
开发学院网页设计DivCss 9个精简优化CSS文件的技巧 阅读

9个精简优化CSS文件的技巧

 2008-12-03 19:29:46 来源:WEB开发网 闂傚倸鍊风欢姘缚瑜嶈灋闁圭虎鍠栫粻顖炴煥閻曞倹瀚�闂傚倸鍊风粈渚€骞夐敓鐘插瀭闁汇垹鐏氬畷鏌ユ煙閹殿喖顣奸柛搴$У閵囧嫰骞掗幋婵冨亾閻㈢ǹ纾婚柟鐐灱濡插牊绻涢崱妤冃℃繛宀婁簽缁辨捇宕掑鎵佹瀸闂佺懓鍤栭幏锟�濠电姷鏁告慨顓㈠箯閸愵喖宸濇い鎾寸箘閹规洟姊绘笟鈧ḿ褍煤閵堝悿娲Ω閳轰胶鍔﹀銈嗗笂閼冲爼鍩婇弴銏$厪闁搞儮鏅涙禒褏绱掓潏鈺佷槐闁轰焦鎹囬弫鎾绘晸閿燂拷闂傚倸鍊风欢姘缚瑜嶈灋闁圭虎鍠栫粻顖炴煥閻曞倹瀚�  闂傚倸鍊烽懗鑸电仚缂備胶绮〃鍛村煝瀹ュ鍗抽柕蹇曞У閻庮剟姊虹紒妯哄闁圭⒈鍋嗛惀顏囶樄闁哄本娲樼换婵婄疀閺囩姷鐛ラ梻浣哄帶婢瑰﹥绂嶅⿰鍫氣偓鏃堝礃椤忎礁浜鹃柨婵嗛婢ь喖霉閻樻瑥瀚粻楣冩煕椤愩倕鏋庨柣蹇嬪劜閵囧嫰寮村Ο鍝勫Е濡炪們鍨洪悷鈺呭箖閳╁啯鍎熼柕鍥у簻閹凤拷
核心提示:原文|via: 9 Tips to Smaller & Optimized CSS Files作者|Author:Stefan Vervoort翻译|Trans: Luc由于CSS文件加载于网页的头部,所以每位访问者都会下载这些文件,9个精简优化CSS文件的技巧,我们会对php文件、图片进行优化,而往往忽略了CSS文件

原文|via:  9 Tips to Smaller & Optimized CSS Files
作者|Author:Stefan Vervoort
翻译|Trans: Luc
由于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代码的质量。

如果你又其他的技巧,那么,欢迎留言。

Tags:精简 优化 CSS

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接