清華大佬耗費三個月吐血整理的幾百G的資源，免費分享！....>>>

值縮寫

縮寫值可以減少CSS文件大小，并增加可讀性和可維護性。

但并非所有的值都必須縮寫，因為當一個屬性的值縮寫時，總是會將所有項都設置一遍，而有時候我們不希望設置值里的某些項。

/* 比如我們用下面這個樣式來讓某個定寬的容器水平居中，我們要的只是left和right， 
 * 而top和bottom不是這個樣式要關心的（如果設置了反倒會影響其他樣式在這個容器上的使用）， 
 * 所以這時我們就不需要縮寫 
 */ 
.f-mgha{margin-left:auto;margin-right:auto;} 
/* 比如下面這個模塊的樣式設置，我們確實需要設置padding的所有項，于是我們就可以采用縮寫 */ 
.m-link{padding:6px 12px;} 

常用的縮寫方法請參見代碼格式。

避免耗性能的屬性

以下所舉列的屬性可能造成渲染性能問題。不過有時候需求大于一切……

/* expression */ 
.class{width:expression(this.width>100?'100px':'auto');} 
/* filter */ 
.class{filter:alpha(opacity=50);} 

選擇器合并

即CSS選擇器組合，可以一次定義多個選擇器，為你節省很多字節和寶貴時間。

通常我們會將定義相同的或者有大部分屬性值相同（確實是因為相關而相同）的一系列選擇器組合到一起（采用逗號的方法）來統一定義。

/* 以下對布局類選擇器統一做了清除浮動的操作 */ 
.g-hd:after,.g-bd:after,.g-ft:after{display:block;visibility:hidden;clear:both;height:0;content:".";} 
.g-hd,.g-bd,.g-ft{zoom:1;} 
/* 通常background總是會占用很多字節，所以一般情況下，我們都會這樣統一調用 */ 
.m-logo,.m-help,.m-list li,.u-tab li,.u-tab li a{background:url(../images/sprite.png) no-repeat 9999px 9999px;} 
.m-logo{background-position:0 0;} 
/* 以下是某個元件的寫法，因為確實很多元素是聯動的或相關的，所以采用了組合寫法，可以方便理解和修改 */ 
.u-tab li,.u-tab li a{display:inline;float:left;height:30px;line-height:30px;} 
.u-tab li{margin:0 3px;} 
.u-tab li a{padding:0 6px;} 

背景圖優化合并

圖片本身的優化：

• 圖像質量要求和圖像文件大小決定你用什么格式的圖片，用較小的圖片文件呈現較好的圖像質量。
• 當圖片色彩過于豐富且無透明要求時，建議采用jpg格式并保存為較高質量。
• 當圖片色彩過于豐富又有透明或半透明要求或陰影效果時，建議采用png24格式，并對IE6進行png8退化（或在不得已情況下使用濾鏡）。
• 當圖片色彩不太豐富時無論有無透明要求，請采用png8格式，大多數情況下建議采用這種格式。
• 當圖片有動畫時，只能使用gif格式。
• 你可以使用工具對圖片進行再次壓縮，但前提是不會影響色彩和透明。

多張圖片的合并：

• 單個圖標之間必須保留空隙，空隙大小由容器大小及顯示方式決定。這樣做的好處是既考慮了“容錯性”又提高了圖片的可維護性。
• 圖標的排列方式，也由容器大小及顯示方式決定。排列方式分為以下幾種：橫向排列（容器寬度有限）、縱向排列（容器高度有限）、斜線排列（容器寬高不限），靠左排列（容器背景居左）、靠右排列（容器背景居右）、水平居中排列（容器背景水平居中）、垂直居中排列（容器背景垂直居中）。
• 合并后圖片大小不宜超過50K，建議大小在20K-50K之間。
• 為保證多次修改后的圖片質量，請保留一份PSD原始圖，修改和添加都在PSD中進行，最后導出png。

分類合并：

并不是把所有的圖標都合并在一張圖片里就是最好的，除了要控制圖片大小之外還要注意以下方法。

• 按照圖片排列方式，把排列方式一樣的圖片進行合并，便于樣式控制。
• 按照模塊或元件，把同屬于一個模塊或元件的圖片進行合并，方便模塊或元件的維護。
• 按照圖片大小，把大小一致或差不多的圖片進行合并，可充分利用圖片空間。
• 按照圖片色彩，把色彩一致或差不多的圖片進行合并，保證合并后圖片的色彩不過于豐富，可防止色彩失真。
• 綜合以上方法進行合并。

Hack的避免

• 當避免的代價較大時，可以使用Hack而不避免，比如你需要增加很多HTML或多寫很多CSS時會得不償失。
• 豐富的實戰經驗可以幫助你了解那些常見問題并用多種不同的思路來避免它，所以經驗和思維方法在這里顯得很重要。
• 根據你自己的能力來解決Hack的問題，我們不建議你用一個自己都沒有把握的方法來避免Hack，因為也許你這個方法本身存在你沒有發現的問題。

如果CSS可以做到，就不要使用JS

讓CSS做更多的事，減輕JS開發量。

• 用CSS控制交互或視覺的變化，JS只需要更改className。
• 利用CSS一次性更改多個節點樣式，避免多次渲染，提高渲染效率。
• 如果你的產品允許不兼容低版本瀏覽器，那么動畫實現可以交給CSS。

便于閱讀修改

如果你做到了“CSS規范”的所有要求，自然你也就寫出了一個便于閱讀和修改的漂亮的CSS。

當然，代碼格式和命名規則是相對重要一些的。

清晰的CSS模塊

如果你做到了命名規則的要求，你的CSS模塊也就清晰可見了。

用“注釋”來說明每一個模塊對于較大的CSS文件來說顯得尤為重要。

文件壓縮

合理的書寫CSS能很大程度上減少文件大小，完成后，在不損壞文件內容的情況下，想盡一切辦法壓縮你的CSS，你可以借助壓縮工具把注釋和多余的空格、換行去掉。

壓縮工具詳見：“HTML/CSS工具”部分。

其他格式優化

優化方法請參見代碼格式。