teren君在之前的寫過《CSS選擇器與優先級淺析》的技博，讓筆者或是看官初步了解的CSS選擇器的分類和優先級的規定，但是到這里我們又牽扯出另一個問題：在實際寫代碼時，如何精簡高效地寫出合適的選擇器以便瀏覽器更好地渲染和提高用戶體驗呢？
本文首先說明使用精簡的CSS命名規則的意義，為各位提供學習的動機。
其次，在收集、帥選和歸納網絡各位大神的技術博客的基礎上，提供一些基本的命名原則以形成精簡CSS命名的思維和方法。
最后，提供一些基礎的CSS命名優化的案例，從實例去具體認識其奧妙之處。
1.CSS命名規范的意義
這里所說i的命名規范有兩層含義，一是命名含義與元素相關，二是命名內容要精簡，具體例子如下：
命名含義與元素相關
精簡的命名規則
從我對命名規范的理解，可以演繹出命名規范的意義所在：
- 富有含義的命名規定對于開發者來說，更容易讀懂
- 精簡的命名規范能夠提高代碼的整潔度和用戶體驗
- 精簡的含義不僅僅包括命名的簡潔性，還包括瀏覽器對頁面的渲染速度，即良好的命名規范可以提高頁面渲染速度
- 良好的命名規則會在精確性和復用性上權衡
2. CSS基本的命名原則
這里的命名原則是參考張鑫旭的技博，是他工作和學習的總結，鑒于筆者剛入前端不久，也不敢瞎寫，一來貽笑大方，而來誤人子弟。下面內容僅供參考之用，具體運用應結合每個人的實際情況。
雖然關于CSS的選擇器有很多，但是在使用選擇器時盡可能的直擊目標。
CSS命名規范
3.CSS命名優化案例
- 案例1
下面的CSS命名極其冗長，導致光是選擇器就占用不少存儲空間
使用以下的排版方式會更加美觀和精簡一些，雖然仍會顯得有些長，但是在可接受范圍內。
- 案例2
<div id="test">
<ul class="test"></ul>
</div>
現在要給這里的ul標簽一個樣式，比如說padding-left:25px;那么下面四種寫法哪個渲染速度最快？#test .test{}， ul.test{}，#test ul{} 以及.test{}。
無疑，.test{}渲染速度最快，《高性能網站進階指南》一書曾提到CSS的渲染方式是“從右往左”渲染的，就拿#test ul{}舉例，先渲染頁面上所有的ul標簽，再去尋找id為test的元素，而.text{}則是直接匹配到class="text"所在的元素。
【注】以上的案列均來自張鑫旭的技術博客
參考資料
