隨着項目規模的增加，項目中的CSS代碼也會越來越多，如果沒有及時對CSS代碼進行維護，CSS代碼不斷會越來越多。我們寫CSS代碼時，不僅僅只是完成頁面設計的效果，還應該讓CSS代碼易於管理，維護。
我們對CSS代碼優化主要有兩個目的：
1、提高代碼性能
2、提高代碼的可維護性
優化主要分爲：
1、圖片優化
2、css代碼優化
3、減少HTTP請求
4、HTML標籤語義化
圖片優化：
1、圖片壓縮
①存儲爲web所用格式
②使用壓縮工具進行壓縮，ps等
2、選擇正確的圖片格式
3、加上高度和寬度
4、ALT-代替屬性
CSS代碼優化：
一、CSS代碼優化作用與意義：
1、減少佔用網頁字節。在同等條件下縮短瀏覽器下載CSS代碼時間，相當於加快網頁打開速度
2、便於維護。簡化和標準化CSS代碼讓CSS代碼減少，便於日後維護
3、讓自己寫的CSS代碼更加專業。
（整理和優化代碼不僅是爲了減小css文件，還包括了維護性和可讀性以及提升css渲染速度。）
二、CSS代碼優化方法：
（1）縮減代碼
1、代碼簡寫。
2、提取共用 css選擇器：可在最後整合。
3、排列代碼，不要每個屬性都獨佔一行，少用回車和空格。
4、減少註釋內容。註釋中不使用漢字。
（2）增強維護性和可讀性。
1、命名規範。：功能命名
2、合適註釋（不能出現漢字）
3、條理化代碼：css代碼整理歸類。如頭部內容與中間內容隔開，方便以後維護。上中下，代碼排列按順序。
4、Css屬性的順序：以字母順序寫屬性。
（3）提高渲染速度
1、不要使用低效率的選擇器：*{}#zishu*{} 或者指定標籤
2、不要使用濾鏡
3 、少用絕對定位
4、平鋪的背景圖片儘可能大一些
5、讓屬性儘量多的去繼承
6、不要放置空的或者沒有的class在html中
減少HTTP請求
1、一個網站中，每個頁面對應一個css文件？
對於大站，爲了規範和方便後期維護可以將一些常用屬性設置放置在一個css文件，將頁面結構內容放在一個css文件中，如（main.css、style.css）但是對於中小型網站來說，一個css文件就足夠了。
2、Css sprite（ css精靈或稱css雪碧）
通過將網頁中用到的所有背景圖片（或所有不需要做鏈接的圖片）置於一張圖片之上。通過css的背景中background-position屬性來定位。注意平鋪的背景圖片與不平鋪的要分別集合到不同的圖片上。
Html結構語義化標籤的使用
1、避免使用不合理的html元素。
類似<font>標籤或者無意義的元素比如<br />或者使用 實現留白等來冒充一個貌似合理但實際上不能使用的結構
“根據元素的含義使用元素，而不是因爲它們看起來像什麼。”結構元素應該只用於傳達結構，而不要強制用於表現。
2、避免標記中的常見錯誤
classitis：代碼標記的margin(即每個標籤中都引用class)
divtis:當使用div來替換那些完好的（或者更適當的）元素的時候，divtis就出現了。
對網站的文件和資源進行優化
文件合併
文件最小化/文件壓縮
使用CDN託管
緩存的使用