早上好，今天 是2019/12/9；天氣陰，歡迎觀看濟(jì)南app開發(fā),微信小程序開發(fā),系統(tǒng)開發(fā)官網(wǎng)。

1、盡量將樣式寫在單獨(dú)的css文件里面，在head元素中引用

有時(shí)候?yàn)榱藞D方便或者快速搞定功能，我們可能會(huì)直接將樣式寫在頁(yè)面的style標(biāo)簽或者直接內(nèi)聯(lián)在元素上，這樣雖然簡(jiǎn)單方便，但是后期維護(hù)起來是比較麻煩的。將代碼寫成單獨(dú)的css文件有幾點(diǎn)好處：

(1)內(nèi)容和樣式分離，易于管理和維護(hù)

(2)減少頁(yè)面體積

(3)css文件可以被緩存、重用，維護(hù)成本降低

(4)山東文匯提醒您：為了維護(hù)好同事之間的關(guān)系，請(qǐng)一定要規(guī)范寫代碼，記得添加注釋和縮進(jìn)?。?！

2、不使用@import

這條手段已經(jīng)是眾所周知，這里簡(jiǎn)單提一下，@import影響css文件的加載速度

3、盡量較少的使用高性屬性：浮動(dòng)、定位；去除空規(guī)則；屬性值為0時(shí)，不加單位；屬性值為浮點(diǎn)數(shù)0.**時(shí)，可以省略小數(shù)點(diǎn)前的0；
標(biāo)準(zhǔn)化各種瀏覽器前綴，帶瀏覽器前綴的在前，標(biāo)準(zhǔn)的在后；

4、避免使用復(fù)雜的選擇器，層級(jí)越少越好

有時(shí)候項(xiàng)目的模塊越來越多，功能越來越復(fù)雜，我們寫的CSS選擇器會(huì)內(nèi)套多層，越來越復(fù)雜。

建議選擇器的嵌套最好不要超過三層，比如：

.header .logo .text{}

可以優(yōu)化成

.haeder .logo-text{}

簡(jiǎn)潔的選擇器不僅可以減少css文件大小，提高頁(yè)面的加載性能，瀏覽器解析時(shí)也會(huì)更加高效，也會(huì)提高開發(fā)人員的開發(fā)效率，降低了維護(hù)成本。

5、精簡(jiǎn)頁(yè)面的樣式文件，去掉不用的樣式

很多時(shí)候，我們會(huì)把所有的樣式文件合并成一個(gè)文件，但是這樣有一個(gè)問題：很多其他頁(yè)面的CSS同時(shí)引用到當(dāng)前頁(yè)面中，而當(dāng)前頁(yè)面并沒有用到它們，這種情況會(huì)造成兩個(gè)問題：

(1)樣式文件偏大，影響加載速度

(2)瀏覽器會(huì)進(jìn)行多余的樣式匹配，影響渲染時(shí)間。

正確的處理方法是根據(jù)當(dāng)前頁(yè)面需要的css去合并那些當(dāng)前頁(yè)面用到的CSS文件。

分享完畢，感謝觀看濟(jì)南app開發(fā)的官網(wǎng)，以后還會(huì)和大家分享學(xué)習(xí)方面的小知識(shí)，歡迎大家關(guān)注山東文匯官方網(wǎng)站，我們是專業(yè)app開發(fā)，微信小程序開發(fā)，系統(tǒng)開發(fā)的專業(yè)互聯(lián)網(wǎng)公司。