一、寫在前面

css的優(yōu)化方案，之前沒有提及，所以接下來進(jìn)行總結(jié)一下。

二、具體優(yōu)化方案

2.1、加載性能

1、css壓縮：將寫好的css進(jìn)行打包，可以減少很多的體積。
2、css單一樣式：在需要下邊距和左邊距的時(shí)候，很多時(shí)候選擇：margin:top 0 bottom 0,但是margin-bottom:bot tom;margin-left:left;執(zhí)行效率更高。
3、減少@import,而建議使用link,因?yàn)楹笳咴陧撁婕虞d時(shí)一起加載，前者是等待頁面加載完成之后再進(jìn)行加載。

2.2、選擇器性能

1、關(guān)鍵選擇器：選擇器的最后面的部分為關(guān)鍵選擇器。css選擇器是從右向左進(jìn)行匹配的。當(dāng)使用后代選擇器的時(shí)候，瀏覽器會(huì)遍歷所有子元素來確定是否是指定的元素等等。
2、如果規(guī)則擁有ID選擇器作為其關(guān)鍵選擇器，則不要為規(guī)則增加標(biāo)簽。過濾掉無關(guān)的規(guī)則。
3、避免使用通配符規(guī)則，如果*{}，計(jì)算次數(shù)驚人，只對需要用到的元素進(jìn)行選擇。
4、盡量少的區(qū)隊(duì)標(biāo)簽進(jìn)行選擇，而使用class。
5、了解哪些屬性是可以通過繼承而來的，然后避免對這些屬性重復(fù)指定規(guī)則。

2.3、渲染性能

1、慎重使用高性能屬性：浮動(dòng)，定位。
2、盡量減少頁面的重排和重繪。
3、去除控規(guī)則，{}。空規(guī)則的產(chǎn)生的原因一般來說是為了預(yù)留樣式。去除這些空規(guī)則則無疑能減少css文檔體積。
4、屬性值為0時(shí)，不加單位。
5、屬性值為浮動(dòng)小數(shù)0.***，可以省略小數(shù)點(diǎn)之前的0。
6、標(biāo)準(zhǔn)化各種瀏覽器前綴，帶瀏覽器前綴的在前。標(biāo)準(zhǔn)屬性在后。
7、不使用@import前綴，它會(huì)影響css的加載速度。
8、選擇器優(yōu)先嵌套，盡量避免層級(jí)過深。
9、css雪碧圖：同一頁面相近部分的小圖標(biāo)，方便使用，減少頁面的請求次數(shù)，但是同時(shí)圖片本身不變大，使用時(shí)，優(yōu)劣考慮清楚使用。
10、正確使用display的屬性，由于display的作用，某一些樣式組合會(huì)無效，徒增樣式體積的同時(shí)也影響性能。

2.4、可維護(hù)性和健壯性

1、將具有相同內(nèi)容的樣式抽離出來，整合并通過class在頁面中進(jìn)行使用，提高css的可維護(hù)性。
2、樣式和內(nèi)容分離，將css代碼定義到外部css中。