1. 基本原則
1.1 把CSS放在Html頁面頭部
由於浏覽器需要在所有的樣式表加載完成後才能開始渲染頁面，樣式表加載完成之前頁面會一直顯示空白，因此需要將樣式表放在頭部。
@import 相當於把 標簽放在頁面的底部，因此從優化性能的角度考慮，應避免使用 @import。
1.2 避免使用 CSS Expressions
Expression 只有 IE 支持，而且他的執行比大多數人想象的要頻繁的多。不僅頁面渲染和改變大小 (resize) 時會執行，頁面滾動 (scroll) 時也會執行，甚至連鼠標在頁面上滑動時都會執行。在 expression 裡面加上一個計數器就會知道，expression 的執行上相當頻繁的。鼠標的滾動很容易就會使 expression 的執行次數超過 10000。
1.3 CSS簡寫
1.3.1 16進制顏色值簡寫
/* Not recommended */ color: #eebbcc; /* Recommended */ color: #ebc;
1.3.2 屬性值簡寫
margin-top: 2px; margin-right: 5px; margin-bottom: 2em; margin-left: 15px; ----->> margin: 2px 5px 2em 15px; border-width: 1px; border-style: solid; border-color: #000 ----->> border: 1px solid #000 font-style: italic; font-variant: small-caps; font-weight: bold; font-size: 1em; line-height: 140%; font-family: sans-serif; ----->> font: italic small-caps bold 1em 140% sans-serIEf background-color: #f00; background-image: url(background.gif); background-repeat: no-repeat; background-attachment: fixed; background-position: 0 0; ----->>background: #f00 url(background.gif) no-repeat fixed 0 0 list-style-type: square; list-style-position: inside; list-style-image: url(image.gif) ----->> list-style: square inside url(image.gif)
1.4 盡量抽取相似部分
.class1{position: absolute; left: 20px; top: 30px;}
.class2{position: absolute; left: 20px; top: 30px;}
.class3{position: absolute; left: 20px; top: 30px;}
.class4{position: absolute; left: 20px; top: 30px;}
.class5{position: absolute; left: 20px; top: 30px;}
.class6{position: absolute; left: 20px; top: 30px;}
-------------------->>>>>>>
.class1 .class2 .class3 .class4 .class5 .class6{
Position: absolute; left: 20px; top: 20px;
}
2. 關鍵要點
2.1 只使用小寫
<!-- Not recommended --> <A HREF="/">Home</A> <!-- Recommended --> <img src="google.png" alt="Google">
2.2 不要有多余的空格（劃線處）
<!-- Not recommended --> <p>What?_ <!-- Recommended --> <p>Yes please.
2.3 使用utf8編碼
Html中： <meta charset="utf-8"> CSS中： @charset "utf-8";
2.4 使用Html5文檔類型
<!DOCTYPE Html>
2.5 驗證Html與CSS文檔
驗證Html
驗證CSS
2.6 使文檔語義化
<!-- Not recommended -->
<div onclick="goToRecommendations();"<All recommendations</div<
<!-- Recommended -->
<a href="recommendations/">All recommendations</a>
2.7 多媒體（多終端）兼容
<!-- Not recommended --> <img src="spreadsheet.png"> <!-- Recommended --> <img src="spreadsheet.png" alt="Spreadsheet screenshot.">
2.8 不要使用實體引用
<!-- Not recommended --> The currency symbol for the Euro is “&eur;”. <!-- Recommended --> The currency symbol for the Euro is “€”.
2.9 使用帶有語義的id和class
/* Not recommended: meaningless */
#yee-1901 {}
/* Not recommended: presentational */
.button-green {}
.clear {}
/* Recommended: specific */
#gallery {}
#login {}
.video {}
/* Recommended: generic */
.aux {}
.alt {}
2.10 省略零值的單位
margin: 0; padding: 0;
2.11 省略起始的零
font-size: .8em;
2.12 盡量避免CSS hacks
嘗試換種解決方案
2.13 為末尾的聲明添加分號
盡管省略末尾分號可以省略一個字節，但是非常不利於團隊維護，得不償失
/* Not recommended */
.test {
display: block;
height: 100px
}
/* Recommended */
.test {
display: block;
height: 100px;
}
2.14 選擇器的效率
浏覽器是“從右往左”來分析 class 的，對於下面的規則
#god > li {font-weight: bold}
浏覽器會先查找頁面上所有的“li”節點，然後再去做進一步的判斷：如果它的父節點的 id 為“god”，則匹配成功。由此可知，CSS 選擇器的匹配遠比我們想象的要慢的多，CSS 的性能問題不容忽視。
2.15 後代選擇器
#toc li {font-weight: bold}
這個效率比之前的“child selector”效率更慢，而且要慢很多。浏覽器先便利所有的“li”節點，然後步步上溯其父節點，直到 DOM 結構的根節點（document），如果有某個節點的 id 為“toc”，則匹配成功，否則繼續查找下一個“li”節點。
2.16 盡量避免全局選擇器
[hidden="true"] { ... } /* A universal rule */
這裡的匹配規則很明顯：查找頁面上的所有節點，如果有節點存在“hidden”屬性，並且其屬性值為“true”，則匹配成功。這是最耗時耗力的匹配，頁面上的所有節點都需要進行匹配運算，這種規則應盡量避免。
是用星號也一樣
#god li *
先找到頁面上的所有元素，再匹配祖先中包含li的元素，然後在這些元素中再查找父元素的id為god的元素。
因此，對於全局選擇器，只建議一種用法：
* { margin: 0; padding: 0; /* etc. */ }
2.17 避免tag+id或者class+id
button#goButton {...};----->>#goButton
.fundation#testIcon {...};----->>#testIcon
2.18 關於tag+class
button.indented {...}----->>.button-indented {...}
程序員們經常會給某個 Class 前面加上標簽名稱（Tag Name），以更精確且快速的定位該節點，但是這樣往往效率更差。因為頁面上的 class 在全局范圍內來講應該是唯一的，用唯一的 Class 名稱來定位一個節點往往比組合定位更加快捷。事實上，這種做法也可以避免由於開發修改頁面元素的類型（Tag）而導致的樣式失效的情況，做到樣式與元素的分離，兩者獨立維護。
2.19 盡量減少規則數量
可以考慮將層級關系寫到一個class中，不過在層級變動時就比較麻煩了
Span[mailfolder="true"] > table > tr > td.columnClass {...}
------------------->>>>>>>
.span-mailfolder-tbl-tdCol {...}
2.20 避免過長的class命名
可以考慮縮寫
ocHeroImage ocEmailAddress
如果覺得難以理解，可以加入連字符或注釋
oc-HeroImage oc-EmailAddress
盡管有語義化方面的考慮，但命名還是盡量短一些，只要易於辨認即可
heroImg emailAddr
2.21 文件名中不應有空格
a) 有空格的文件名會被Google當成兩個關鍵字，可能帶來更多的搜索結果，引來更多流量，是好事
b) 有空格意味著不能省略引號，多了兩個字節
c) 空格會被浏覽器自動轉換為%20，老的浏覽器可能不支持，如果將%20硬編碼到URL中則每個實例中都多了兩個字符
input {background: url("/images/shadow background.gif");}
2.22 省略URI的引號
@import url(//www.google.com/css/go.CSS);
2.23 盡量避免後代選擇器
treehead treerow treecell {...} ----->> treehead > treerow > treecell {...}
Descendant 選擇器是耗時相對高的選擇器，通常來講，它在 CSS 裡的使用應該是盡量避免的，如果能用 child 選擇器替代就應該盡量這樣去做。
2.24 充分利用繼承機制
Color
font
letter-spacing
line-height
list-style
text-align
text-indent
text-transform
white-space
Word-spacing
#bookmark > .menu-left {list-style-image: url(blah)}
------------>>>>>>>>
#bookmark {list-style-image: url(blah)}
2.25 發布之前一定要進行壓縮
可使用YUI Compressor或類似軟件進行壓縮後再發布。
3. 高級技巧
3.1 省略嵌入資源的協議
即可避免混合內容問題（mixed content issues）也可以縮減文件大小
<!-- Not recommended -->
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>
<!-- Recommended -->
<script src="//www.google.com/js/gweb/analytics/autotrack.JS"></script>
/* Not recommended */
.example {
background: url(http://www.google.com/images/example);
}
/* Recommended */
.example {
background: url(//www.google.com/images/example);
}
3.2 省略可選的標簽
Html5規范中指定了一些可以省略的標簽，可以縮減文件大小
<!-- Not recommended -->
<!DOCTYPE html>
<html>
<head>
<title>Spending money, spending bytes</title>
</head>
<body>
<p>Sic.</p>
</body>
</html>
<!-- Recommended -->
<!DOCTYPE Html>
<title>Saving money, saving bytes</title>
<p>Qed.
3.3 文件結構
由於圖像等資源一般只有CSS文件使用，故可將圖像文件夾放到CSS文件同級目錄，這樣就可使用相對路徑，節省字節數
input {background: url("images/shadow background.gif");}
3.4 文件夾命名
通常文件夾會被命名為其所代表的資源的復數形式
images assets fonts
其實大可不必，使用單數形式可以節省許多字節，尤其是當每個項目的結構都類似時
img asset font
對於下面一段包含58字節的代碼：
input {background: url("/images/shadow background.gif");}
優化後變為52字節，即10%的壓縮：
input {background: url(img/shadow-background.gif);}
如果在使用縮寫，則可進一步縮減：
input {background: url(img/shadow-bg.gif);}
如果一個項目有幾百行這樣的代碼，那麼就會節省幾百字節了。如果站點訪問量超大，則可節省數目客觀的帶寬資源。
3.5 末尾聲明的分號
前面提過，去掉末尾聲明的分號可以節省字節，但不利於維護。可以考慮在壓縮發布階段去掉。
.clear {clear:both;}
.clear {clear:both}
3.6 背景色簡寫
背景色簡寫也可節省字節，但要慎用，因為省略掉的默認屬性會覆蓋前面的屬性。
background-color: blue; background: blue;
3.7 濾鏡簡寫
selector {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65);
}
filter的版本是IE8以下的，–ms-filter的版本是IE9以上的，YUI會將其壓縮為：
selector {
-ms-filter:"alpha(opacity=65)";
filter:alpha(opacity=65);
}
由於YUI的廣泛使用極其社區開發著的強大力量，說明這種寫法已經是經過深度測試的寫法，可以放心使用。
3.8 Gzip壓縮與CSS書寫
Goolge建議按照字母順序書寫CSS規則，方便維護。其他公司也有自己的規范。從Gzip壓縮角度，只要整個文檔中的書寫順序保持一致即可，可以提高Gzip壓縮比率。
background: fuchsia; border: 1px solid; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; color: black; text-align: center; text-indent: 2em;
3.9 更少的請求比更小的尺寸重要
文件可以適當的合並，只保留基本的層級即可
<link rel="stylesheet" href="http://css.somedomain.com/reset.css" type="text/css" /> <link rel="stylesheet" href="http://css.somedomain.com/global.css" type="text/css" /> <link rel="stylesheet" href="http://css.somedomain.com/home.css" type="text/CSS" />