作網站的，咱們都知道盡可能減小請求數，壓縮CSS代碼量，使用高效CSS選擇符等方式能夠來提升網站的載入速度和訪問速度，也就是優化網站的性能。css
下面分析了一些CSS的書寫方式，不少都是咱們知道而且正在使用的，這裏記錄一下，提醒本身之後寫CSS的時候儘可能從這些方面出發來使用，對於CSS的性能提高有很大的幫助，對於你本身寫出來的代碼也更加的靠譜了。html
本文摘錄之「高效CSS開發核心」，一些我認爲是已經不須要用規則來約束的就再也不囉嗦了，感興趣的讀者能夠去看全文。前端
1.把CSS文件放在<head>中，避免使用@import（由於使用了import以後就至關於把另外的CSS放在了標籤的底部）程序員
2.避免使用CSS表達式，CSS表達式只在IE中有用，他執行的次數隨着頁面的縮小、放大和滾動等都會出現變化。web
3.html標籤使用小寫dom
<!-- Not recommended --> <A HREF="/">Home</A> <!-- Recommended --> <img src="google.png" alt="高效CSS開發核心要點摘錄" alt="Google">
4.使用UTF-8編碼ide
html中： <meta charset="utf-8"> css中： @charset "utf-8";
5.不要使用實體引用svn
好比「>」儘可能寫成">"post
6.省略零值後面的單位和省掉起始的0值性能
margin: 0; padding: 0; font-size: .8em;
8.避免tag+id或者class+id
button#goButton {...};----->>#goButton .fundation#testIcon {...};----->>#testIcon
9. 關於tag+class
button.indented {...}----->>.button-indented {...}
程序員們常常會給某個 Class 前面加上標籤名稱（Tag Name），以更精確且快速的定位該節點，可是這樣每每效率更差。由於頁面上的 class 在全局範圍內來說應該是惟一的，用惟一的 Class 名稱來定位一個節點每每比組合定位更加快捷。事實上，這種作法也能夠避免因爲開發修改頁面元素的類型（Tag）而致使的樣式失效的狀況，作到樣式與元素的 分離，二者獨立維護。
10. 儘可能避免後代選擇器
就是說要多用子類選擇器這種方式（IE6不支持），「>」
treehead treerow treecell {...} ----->> treehead > treerow > treecell {...}
Descendant 選擇器是耗時相對高的選擇器，一般來說，它在 CSS 裏的使用應該是儘可能避免的，若是能用 child 選擇器替代就應該儘可能這樣去作。
11. 發佈以前必定要進行壓縮
可以使用YUI Compressor或相似軟件進行壓縮後再發布。
12. 省略嵌入資源的協議
便可避免混合內容問題（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); }
13. 文件結構
我以爲這個卻是能夠有，不過若是是項目的話，我怕設計到的CSS文件太多，形成管理不便，若是是內容較少的狀況下能夠用這種方式。
因爲圖像等資源通常只有CSS文件使用，故可將圖像文件夾放到CSS文件同級目錄，這樣就可以使用相對路徑，節省字節數
input {background: url("images/shadow background.gif");}
14. 文件夾命名
這個推薦使用這種方式，不過有一些主題等是習慣了使用複數了，具體狀況具體分析，可使用盡可能用下面這種單數。
一般文件夾會被命名爲其所表明的資源的複數形式
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);}
若是一個項目有幾百行這樣的代碼，那麼就會節省幾百字節了。若是站點訪問量超大，則可節省數目客觀的帶寬資源。
15. 濾鏡簡寫
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的普遍使用極其社區開發着的強大力量，說明這種寫法已是通過深度測試的寫法，能夠放心使用。
16 Gzip壓縮與CSS書寫
這個仁者見仁智者見智，有些人認爲從CSS的加載方式（即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;
17 更少的請求比更小的尺寸重要
文件能夠適當的合併，只保留基本的層級便可
<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" />
實際應用中固然不可能作到上面這麼多的要點，並且也須要根據項目的差別來作出調整，這裏總體上我以爲是能夠給我一點啓發的，好比不要使用「標籤+類名、標籤+ID、使用單數的文件結構、把圖片放在CSS的同級目錄、濾鏡的簡寫、更少的請求。