如何提高CSS性能，根據頁面的加載性能和CSS代碼性能，主要表現為： 加載性能 （主要是從減少文件體積，減少阻塞加載，提高並發方面入手），選擇器性能，渲染性能，可維護性。
1、盡量將樣式寫在單獨的css文件里面，在head元素中引用
(1)內容和樣式分離，易於管理和維護
(2)減少頁面體積
(3)css文件可以被緩存、重用，維護成本降低
2、不使用@import
如果你使用@import屬性引入css的話,當用戶瀏覽的網速較慢時,他會看到一個沒有風格樣式的頁面,然后隨着CSS文件被下載完成才可以看到應有的風格
3、避免使用復雜的選擇器，層級越少越好
項目的模塊越來越多，功能越來越復雜，我們寫的CSS選擇器會內套多層，越來越復雜。建議選擇器的嵌套最好不要超過三層，簡潔的選擇器不僅可以減少css文件大小，提高頁面的加載性能，瀏覽器解析時也會更加高效，也會提高開發人員的開發效率，降低了維護成本。
4、精簡頁面的樣式文件，去掉不用的樣式
(1)樣式文件偏大，影響加載速度
(2)瀏覽器會進行多余的樣式匹配，影響渲染時間。
根據當前頁面需要的css去合並那些當前頁面用到的CSS文件， 合並成一個文件有一個優點：樣式文件會被瀏覽器緩存，進入到其他頁面樣式文件不用再去下載。
5、利用CSS繼承減少代碼量
我們知道有一部分CSS代碼是可以繼承的，如果父元素已經設置了該樣式，子元素就不需要去設置該樣式，這個也是提高性能的行之有效的方法。
6、慎重使用高性能屬性：浮動、定位；
一方面，浮動的種種復雜的布局規則注定了它是一種試探性局部 reflow 式的布局算法。瀏覽器需要花費很多精力來處理它。另一方面，浮動元素的布局牽涉到的因素更多。在同一布局空間中，所有浮動元素均存在於“靜態層”之上的“浮動層”，不僅浮動層中的多個浮動元素會相互影響，浮動元素與靜態層也有互動。
7、css樣式前綴
標准化各種瀏覽器前綴，帶瀏覽器前綴的在前，標准的在后
8、css屬性值
屬性值為0時，不加單位
屬性值為浮點數0.**時，可以省略小數點前的0
CSS Lint
這是一個發現CSS書寫問題，提升性能的工具 ，如：
-
修復解析錯誤（Parsing errors should be fixed）
-
避免使用多類選擇符（Don't use adjoining classes）
IE6以及更古老的瀏覽器對類似.foo.bar的多類選擇符解析不正確
-
移除空的css規則（Remove empty rules）
這個規則不包含任何屬性，類似：.foo { }
空規則的產生原因一般來說是為了預留樣式。去除這些空規則無疑能減少css文檔體積。
-
正確使用display的屬性（Use correct properties for a display）
由於display的作用，某些樣式組合會無效，徒增樣式體積的同時也影響解析性能。CSS Lint會檢查一下幾點：
display:inline后不應該再使用width、height、margin、padding以及float。
display:inline-block后不應該再使用float。
display:block后不應該再使用vertical-align。
display:table-*后不應該再使用margin或者float。
-
不濫用浮動（Don't use too many floats）
雖然浮動不可避免，但不可否認很多css bug是由於浮動而引起。CSS Lint一旦檢測出樣式文件中有超過10次的浮動便會提示警告。
-
不濫用web字體（Don't use too many web fonts）
對於中文網站來說Web Fonts可能很陌生，國外卻很流行。web fonts通常體積龐大，而且一些瀏覽器在下載web fonts時會阻塞頁面渲染損傷性能。
-
不聲明過多的font-size（Don't use too may font-size declarations）
這是設計層面的問題，設計精良的頁面不會有過多的font-size聲明。
-
不在選擇符中使用ID標識符（Don't use IDs in selectors）
主要考慮到樣式重用性以及與頁面的耦合性。
-
不給h1~h6元素定義過多的樣式（Don't qualify headings）
全站統一定義一遍heading元素即可，若需額外定制樣式，可使用其他選擇符作為代替。
-
不重復定義h1~h6元素（Heading styles should only be defined once）
-
值為0時不需要任何單位（Zero values don't need units）
-
標准化各種瀏覽器前綴（Vendor prefixed properties should also have the standard）
通常將瀏覽器前綴置於前面，將標准樣式屬性置於最后，類似：
.foo {-moz-border-radius: 5px;border-radius: 5px; }
-
使用CSS漸變等高級特性，需指定所有瀏覽器的前綴（CSS gradients require all browser prefixes）
-
避免讓選擇符看起來像正則表達式（Avoid selectors that look like regular expressions）
CSS3添加了一些類似~=等復雜屬性，也不是所有瀏覽器都支持，需謹慎使用。
-
遵守盒模型規則（Beware of broken box models）