最初寫(xiě)CSS的時(shí)候，覺(jué)得很簡(jiǎn)單，寫(xiě)得天馬行空。后來(lái)慢慢的發(fā)現(xiàn)，沒(méi)有規(guī)則的瞎寫(xiě)，雖然也能實(shí)現(xiàn)效果，但是在實(shí)際開(kāi)發(fā)中可能會(huì)多做無(wú)用功或是重復(fù)做功，并且CSS并不高效。于是后期開(kāi)發(fā)時(shí)就特意按照一定的規(guī)則，盡可能的寫(xiě)出高效的，可復(fù)用的CSS，總結(jié)一下，主要是是以下幾個(gè)方面。

首先看一小段 CSS 代碼：

#menus > li { font-size: 14px; }

可能大家都會(huì)猜想瀏覽器會(huì)使從左到右匹配上面的規(guī)則，我們會(huì)想象瀏覽器先找到唯一的 id 為 menus 的元素，然后把樣式應(yīng)用到其直系子元素 li 元素上。這看起來(lái)好像還挺高效的。

但是，事實(shí)上，CSS 選擇符是從右到左進(jìn)行匹配的。所以，上面的這條規(guī)則并不高效，瀏覽器必需遍歷頁(yè)面上的每個(gè) li 元素并確定其父元素的 id 是否為 menus。

樣式系統(tǒng)從最右邊的選擇符開(kāi)始向左匹配規(guī)則。只有當(dāng)前選擇符的左邊還有其他的選擇符，樣式系統(tǒng)就會(huì)繼續(xù)向左移動(dòng)，直到找到和規(guī)則匹配的元素，或者因?yàn)椴黄ヅ涠顺觥?/p>

編寫(xiě)高效的CSS選擇符有以下常用規(guī)則：

一、避免使用通配規(guī)則

除了傳統(tǒng)意義上的通配選擇符之外，我們把相鄰兄弟選擇符、子選擇符、后代選擇符合屬性選擇符都?xì)w納到通配規(guī)則分類下，推薦僅使用 ID、類和標(biāo)簽選擇符。

二、不要限定 ID 選擇符

在頁(yè)面中一個(gè)指定的ID只能對(duì)應(yīng)一個(gè)元素，所以沒(méi)有必要添加額外的限定符。例如，div#header是沒(méi)有必要的，應(yīng)該簡(jiǎn)化為#header。

三、不要限定類選擇符

不要用具體的標(biāo)簽限定類選擇符，而是根據(jù)實(shí)際情況對(duì)類名進(jìn)行擴(kuò)展。例如，把li.chapter改成.li-chapter，或是.list-chapter更好。

四、讓規(guī)則越具體越好

不要試圖編寫(xiě)像 ol li a 這樣的長(zhǎng)選擇符，最好是創(chuàng)建一個(gè)像.list-anchor一樣的類，并把它添加到適當(dāng)?shù)脑厣稀?/p>

五、避免使用后代選擇符

通常處理后代選擇符的開(kāi)銷時(shí)最高的，而使用子選擇符也可以得到想要的結(jié)果，并且更加高效。

六、避免使用標(biāo)簽—子選擇符

如果有像#menus > li > a這樣的基于標(biāo)簽的子選擇符，那么應(yīng)該使用一個(gè)類來(lái)關(guān)聯(lián)每個(gè)標(biāo)簽元素，例如.menus-item。

七、質(zhì)疑子選擇符的所有用途

檢查所有使用子選擇符的地方，然后盡可能用具體的類取代它們。

八、依靠繼承

了解哪些屬性可以通過(guò)繼承而來(lái)，然后避免對(duì)這些屬性重復(fù)指定規(guī)則。例如，對(duì)列表元素而不是每個(gè)列表元素指定list-style-image。請(qǐng)參考繼承屬性的列表來(lái)了解每個(gè)元素的可繼承的屬性。

摘自《高性能網(wǎng)站建設(shè)進(jìn)階指南——Web開(kāi)發(fā)者性能優(yōu)化最佳實(shí)踐》

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論