CSS樣式表文件的優(yōu)化方法及技巧

時(shí)間：2022-05-29 15:30:02 | 來源：網(wǎng)絡(luò)營銷

時(shí)間：2022-05-29 15:30:02 來源：網(wǎng)絡(luò)營銷

今天，整理了一些CSS簡寫技巧，它們其實(shí)是CSS最常用的寫法，但是太多的人使用Dreamweaver這種所見即所得軟件來編寫CSS，使得代碼過于臃腫。

CSS代碼優(yōu)化的最大好處就是能夠顯著減少CSS文件的大小，其實(shí)還有很多其他益處，臃腫而雜亂的CSS樣式表會(huì)使你遇到問題是難以調(diào)試，尤其是當(dāng)一個(gè)團(tuán)隊(duì)在進(jìn)行設(shè)計(jì)的時(shí)候，你的臃腫的CSS代碼會(huì)使你的團(tuán)隊(duì)其他成員的工作效率下降。

不過沒關(guān)系，看過本文之后，你一能能掌握CSS代碼優(yōu)化的技巧，今后讓你的每一個(gè)CSS樣式表都看起來整潔而簡短吧。

一、使用CSS縮寫

使用縮寫可以幫助減少你CSS文件的大小，更加容易閱讀（具體可查看億企邦《CSS常用代碼使用技巧大全》的相關(guān)介紹）。

CSS縮寫的主要規(guī)則如下：

1、顏色

16進(jìn)制的色彩值，如果每兩位的值相同，可以縮寫一半，例如：

#000000可以縮寫為#000;

#336699可以縮寫為#369;

2、盒尺寸

通常有下面四種書寫方法：

property:value1; 表示所有邊都是一個(gè)值value1；

property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2

property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3

property:value1 value2 value3 value4; 四個(gè)值依次表示top,right,bottom,left

方便的記憶方法是順時(shí)針，上右下左。具體應(yīng)用在margin和padding的例子如下：

margin:1em 0 2em 0.5em;

3、邊框(border)

邊框的屬性如下：

border-width:1px;
border-style:solid;
border-color:#000;

可以縮寫為一句：border:1px solid #000;

語法是border:width style color;

4、背景(Backgrounds)

背景的屬性如下：

background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;

可以縮寫為一句：background:#f00 url(background.gif) no-repeat fixed 0 0;

語法是background:color image repeat attachment position;

你可以省略其中一個(gè)或多個(gè)屬性值，如果省略，該屬性值將用瀏覽器默認(rèn)值，默認(rèn)值為：

color: transparent
image: none
repeat: repeat
attachment: scroll
position: 0% 0%

5、字體(fonts)

字體的屬性如下：

font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;

可以縮寫為一句：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

注意，如果你縮寫字體定義，至少要定義font-size和font-family兩個(gè)值。

6、列表(lists)

取消默認(rèn)的圓點(diǎn)和序號可以這樣寫list-style:none;

list的屬性如下:

list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);

可以縮寫為一句：list-style:square inside url(image.gif);

二、明確定義單位，除非值為0

忘記定義尺寸的單位是CSS新手普遍的錯(cuò)誤。在HTML中你可以只寫width=100，但是在CSS中，你必須給一個(gè)準(zhǔn)確的單位，比如：width:100px；width:100em。

只有兩個(gè)例外情況可以不定義單位：行高和0值。

除此以外，其他值都必須緊跟單位，注意，不要在數(shù)值和單位之間加空格。

三、區(qū)分大小寫

當(dāng)在XHTML中使用CSS，CSS里定義的元素名稱是區(qū)分大小寫的，為了避免這種錯(cuò)誤，億企邦建議所有的定義名稱都采用小寫。

class和id的值在HTML和XHTML中也是區(qū)分大小寫的，如果你一定要大小寫混合寫，請仔細(xì)確認(rèn)你在CSS的定義和XHTML里的標(biāo)簽是一致的（具體可查看億企邦《看看那些能提高效率卻容易被人忽略的CSS細(xì)節(jié)》的相關(guān)介紹）。

四、取消class和id前的元素限定

當(dāng)你寫給一個(gè)元素定義CSS中class或者id，你可以省略前面的元素限定，因?yàn)镮D在一個(gè)頁面里是唯一的，class可以在頁面中多次使用，你限定某個(gè)元素毫無意義。例如：

ExampleSourceCode
div#content{/*declarations*/}
fieldset.details{/*declarations*/}

可以寫成：

ExampleSourceCode
#content{/*declarations*/}
.details{/*declarations*/}

這樣可以節(jié)省一些字節(jié)。

五、默認(rèn)值

CSS中通常padding的默認(rèn)值為0，background-color的默認(rèn)值是transparent。但是在不同的瀏覽器默認(rèn)值可能不同。如果怕有沖突，可以在CSS樣式表一開始就先定義所有元素的margin和padding值都為0，像以下這樣：

ExampleSourceCode
*{
margin:0;
padding:0;
}

六、利用CSS繼承

如果頁面中父元素的多個(gè)子元素使用相同的樣式，那最好把他們相同的樣式定義在其父元素上，讓它們繼承這些CSS樣式，這樣你可以很好的維護(hù)你的代碼，并且還可以減少代碼量。

那么，本來這樣的代碼：

#container li{ font-family:Georgia, serif; }
#container p{ font-family:Georgia, serif; }
#container h1{font-family:Georgia, serif; }

可以寫成:

#container{font-family:Georgia,serif; }

七、使用多重選擇器

你可以合并多個(gè)CSS選擇器為一個(gè)，如果他們有共同的樣式的話。這樣做不但代碼簡潔且可為你節(jié)省時(shí)間和空間。如：

h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

八、使用外部樣式表

這個(gè)原則始終是一個(gè)很好的設(shè)計(jì)實(shí)踐，不單可以更易于維護(hù)修改，更重要的是使用外部文件可以提高頁面速度，因?yàn)镃SS文件都能在瀏覽器中產(chǎn)生緩存。

內(nèi)置在HTML文檔中的CSS則會(huì)在每次請求中隨HTML文檔重新下載。

九、提升CSS性能的規(guī)則

1、修復(fù)解析錯(cuò)誤。

2、避免使用多類選擇符。IE6以及更古老的瀏覽器對類似.foo.bar的多類選擇符解析不正確。

3、移除空的css規(guī)則。這個(gè)規(guī)則不包含任何屬性，類似：.foo { }空規(guī)則的產(chǎn)生原因一般來說是為了預(yù)留樣式，去除這些空規(guī)則無疑能減少css文檔體積（具體可查看億企邦《網(wǎng)站CSS代碼優(yōu)化的7個(gè)原則》的相關(guān)介紹）。

4、正確使用display的屬性。由于display的作用，某些樣式組合會(huì)無效，徒增樣式體積的同時(shí)也影響解析性能。

CSS會(huì)檢查一下幾點(diǎn)：

display:inline后不應(yīng)該再使用width、height、margin、padding以及float。

display:inline-block后不應(yīng)該再使用float。

display:block后不應(yīng)該再使用vertical-align。

display:table-*后不應(yīng)該再使用margin或者float。

5、不濫用浮動(dòng)。雖然浮動(dòng)不可避免，但不可否認(rèn)很多css bug是由于浮動(dòng)而引起。CSS一旦檢測出樣式文件中有超過10次的浮動(dòng)便會(huì)提示警告。

6、不濫用web字體。對于中文網(wǎng)站來說Web Fonts可能很陌生，國外卻很流行。web fonts通常體積龐大，而且一些瀏覽器在下載web fonts時(shí)會(huì)阻塞頁面渲染損傷性能。

7、不聲明過多的font-size。這是設(shè)計(jì)層面的問題，設(shè)計(jì)精良的頁面不會(huì)有過多的font-size聲明。

8、不在選擇符中使用ID標(biāo)識符。主要考慮到樣式重用性以及與頁面的耦合性。

9、不給h1~h6元素定義過多的樣式。全站統(tǒng)一定義一遍heading元素即可，若需額外定制樣式，可使用其他選擇符作為代替。

10、不重復(fù)定義h1~h6元素。

11、值為0時(shí)不需要任何單位。

12、標(biāo)準(zhǔn)化各種瀏覽器前綴。通常將瀏覽器前綴置于前面，將標(biāo)準(zhǔn)樣式屬性置于最后，類似：

.foo {-moz-border-radius: 5px;border-radius: 5px; }

13、使用CSS漸變等高級特性，需指定所有瀏覽器的前綴。

14、避免讓選擇符看起來像正則表達(dá)式。CSS3添加了一些類似~=等復(fù)雜屬性，也不是所有瀏覽器都支持，需謹(jǐn)慎使用。

15、遵守盒模型規(guī)則。

億企邦點(diǎn)評：

合理的CSS樣式表不僅僅會(huì)節(jié)省后期的維護(hù)成本，也會(huì)對加載性能等方面產(chǎn)生影響。另外，你還要考慮對CSS進(jìn)行壓縮，除去注釋和空格，以使得網(wǎng)頁加載得更快。