css代碼優化

1、CSS代碼優化做用與意義

 

一、減小佔用網頁字節。在同等條件下縮短瀏覽器下載css代碼時間，加快網頁打開速度。

 

二、簡化和標準化css代碼，便於往後維護。

 

三、讓本身寫的css代碼更加專業。

 

2、須要優化css代碼地方：

1. 使用Reset但並不是全局Reset。不一樣瀏覽器元素的默認屬性有所不一樣，使用Reset可重置瀏覽器元素的一些默認屬性，以達到瀏覽器的兼容。但須要注意的是，請不要使用全局Reset。

 

2. 良好的命名習慣。

 

3. CSS代碼縮寫。能夠提升寫代碼的速度，精簡代碼量。在CSS裏面有很多能夠縮寫的屬性，包括 margin， padding， border ，font ，background 和顏色值等。

 

4. 利用CSS繼承。若是頁面中父元素的多個子元素使用相同的樣式，那最好把他們相同的樣式定義在其父元素上，讓它們繼承這些CSS樣式。能夠很好的維護代碼，減小代碼量。

 

5. 使用多重選擇器。若是他們有共同的樣式，能夠合併多個CSS選擇器爲一個。這樣作不但代碼簡潔，且能夠節省時間和空間。

 

6. 適當的代碼註釋。代碼註釋可讓別人更容易讀懂你的代碼，且合理的組織代碼註釋，可以使得結構更加清晰。

 

7. 保持CSS的可讀性。書寫可讀的CSS將會使得更容易查找和修改樣式。

 

8. 使用外部樣式表。不單更易於維護修改，更重要的是使用外部文件能夠提升頁面速度，由於CSS文件都能在瀏覽器中產生緩存。內置在HTML文檔中的CSS則會在每次請求中隨HTML文檔從新下載。

9. 避免使用CSS表達式（Expression）。表達式的問題就在於它的計算頻率要比咱們想象的多。不單單是在頁面顯示和縮放時，就是在頁面滾動、乃至移動鼠標時都會要從新計算一次。給CSS表達式增長一個計數器能夠跟蹤表達式的計算頻率。在頁面中隨便移動鼠標均可以輕鬆達到10000次以上的計算量。

 

10. 代碼壓縮。當你決定把網站項目部署到網絡上，那你就要考慮對CSS進行壓縮，除去註釋和空格，以使得網頁加載得更快。採用一些工具，如YUI Compressor，利用它可精簡CSS代碼，減小文件大小，以得到更高的加載速度。

 

11.不要在ID選擇器和class選擇器前使用標籤名。例如：div.box { color: #f00; }; 直接 能夠 用類名， .box { color:#f00;}  這樣瀏覽器找到這個class後就不用再匹配是否存在div標籤，從而提升了渲染效率。

 

12.css的層級關係不要太深。用class直接代替多餘的層級元素。

 

13.平鋪背景圖片不要太小，影響渲染速率。

 

14. 少用濾鏡，少用hack，少用position：absolute；float使用要謹慎。

 

15.合理化佈局（模塊化佈局）。能夠把樣式劃分基類和擴展類 ，模塊基本相同的樣式寫在基類裏，不一樣的再從新用class來定義稱爲擴展類 。

 

16. 在css渲染效率中id和class的效率是基本至關的 。class最在第一次載入中被緩存，在層疊中會有更加好的效果，在根部元素採用id會具備更加好（id有微妙的速度優點）。