如何寫出高效率的CSS選擇符
- 小云云原創
- 2017-11-30 10:43:121620瀏覽
我們都知道CSS選擇符有很多種，很多人在寫CSS頁面的時候，或許覺得很好玩也很簡單，但是你會慢慢的發現，那就是沒有規則的瞎寫，雖然也能實現效果，但是在實際開發中可能會多做無用功或是重複做功，並且CSS並不高效。所以本文我們將教大家如何寫出高效率的，可重複使用的CSS，主要是以下幾個面向。
首先看一小段CSS 程式碼：
#menus > li { font-size: 14px; }可能大家都會猜想瀏覽器會使從左到右匹配上面的規則，我們會想像瀏覽器先找到唯一的id 為menus 的元素，然後把樣式套用到其直系子元素li 元素上。這看起來好像還蠻有效率的。
但是，事實上，CSS 選擇符是從右到左進行匹配的。所以，上面的這條規則並不高效，瀏覽器必需遍歷頁面上的每個 li 元素並確定其父元素的 id 是否為 menus。
樣式系統從最右邊的選擇符號開始向左符合規則。只有目前選擇符的左邊還有其他的選擇符，樣式系統就會繼續向左移動，直到找到和規則相符的元素，或因為不符而退出。
寫高效的CSS選擇符有以下常用規則：
一、避免使用通配規則
除了傳統意義上的通配選擇符之外，我們把相鄰兄弟選擇符、子選擇符、後代選擇符合屬性選擇符都歸納到通配規則分類下，建議僅使用ID、類別和標籤選擇符。
二、不要限定 ID 選擇符
在頁面中一個指定的ID只能對應一個元素，所以沒有必要加入額外的限定符。例如，div#header是沒有必要的，應該簡化為#header。
三、不要限定類別選擇符
不要用具體的標籤限定類別選擇符，而是依照實際情況來擴充類別名稱。例如，把li.chapter改成.li-chapter，或是.list-chapter比較好。
四、讓規則越具體越好
不要試圖寫像ol li a 這樣的長選擇符，最好是創建一個像.list-anchor一樣的類，並把它添加到適當的元素上。
五、避免使用後代選擇符
通常處理後代選擇符的開銷時最高的，而使用子選擇符也可以獲得想要的結果，並且更有效率。
六、避免使用標籤—子選擇符
如果有像#menus > li > a這樣的基於標籤的子選擇符，那麼應該使用一個類別來關聯每個標籤元素，例如.menus-item。
七、質疑子選擇符的所有用途
檢查所有使用子選擇符的地方，然後盡可能用特定的類別取代它們。
八、依賴繼承
了解哪些屬性可以透過繼承而來，然後避免對這些屬性重複指定規則。例如，對列表元素而不是每個列表元素指定list-style-image。請參考繼承屬性的清單來了解每個元素的可繼承的屬性。
以上內容就是如何寫高效的 CSS 選擇符的方法教程，希望能幫助大家。
相關推薦：
以上是如何寫出高效率的CSS選擇符的詳細內容。更多資訊請關注PHP中文網其他相關文章！