teren君在之前的寫過(guò)《CSS選擇器與優(yōu)先級(jí)淺析》的技博疲酌，讓筆者或是看官初步了解的CSS選擇器的分類和優(yōu)先級(jí)的規(guī)定，但是到這里我們又牽扯出另一個(gè)問(wèn)題：在實(shí)際寫代碼時(shí)擂仍，如何精簡(jiǎn)高效地寫出合適的選擇器以便瀏覽器更好地渲染和提高用戶體驗(yàn)?zāi)兀?/p>
本文首先說(shuō)明使用精簡(jiǎn)的CSS命名規(guī)則的意義，為各位提供學(xué)習(xí)的動(dòng)機(jī)。
其次悄雅，在收集、帥選和歸納網(wǎng)絡(luò)各位大神的技術(shù)博客的基礎(chǔ)上铁蹈，提供一些基本的命名原則以形成精簡(jiǎn)CSS命名的思維和方法宽闲。
最后，提供一些基礎(chǔ)的CSS命名優(yōu)化的案例，從實(shí)例去具體認(rèn)識(shí)其奧妙之處容诬。
1.CSS命名規(guī)范的意義
這里所說(shuō)i的命名規(guī)范有兩層含義围辙，一是命名含義與元素相關(guān)，二是命名內(nèi)容要精簡(jiǎn)放案，具體例子如下：
從我對(duì)命名規(guī)范的理解姚建，可以演繹出命名規(guī)范的意義所在：
- 富有含義的命名規(guī)定對(duì)于開發(fā)者來(lái)說(shuō)，更容易讀懂
- 精簡(jiǎn)的命名規(guī)范能夠提高代碼的整潔度和用戶體驗(yàn)
- 精簡(jiǎn)的含義不僅僅包括命名的簡(jiǎn)潔性吱殉，還包括瀏覽器對(duì)頁(yè)面的渲染速度掸冤，即良好的命名規(guī)范可以提高頁(yè)面渲染速度
- 良好的命名規(guī)則會(huì)在精確性和復(fù)用性上權(quán)衡
2. CSS基本的命名原則
雖然關(guān)于CSS的選擇器有很多涕俗，但是在使用選擇器時(shí)盡可能的直擊目標(biāo)。
3.CSS命名優(yōu)化案例
- 案例1
下面的CSS命名極其冗長(zhǎng)神帅，導(dǎo)致光是選擇器就占用不少存儲(chǔ)空間
使用以下的排版方式會(huì)更加美觀和精簡(jiǎn)一些再姑，雖然仍會(huì)顯得有些長(zhǎng)，但是在可接受范圍內(nèi)找御。
- 案例2
<div id="test">
<ul class="test"></ul>
</div>
現(xiàn)在要給這里的ul標(biāo)簽一個(gè)樣式元镀，比如說(shuō)padding-left:25px;那么下面四種寫法哪個(gè)渲染速度最快？#test .test{}霎桅， ul.test{}栖疑，#test ul{} 以及.test{}。
無(wú)疑滔驶，.test{}渲染速度最快遇革，《高性能網(wǎng)站進(jìn)階指南》一書曾提到CSS的渲染方式是“從右往左”渲染的，就拿#test ul{}舉例瓜浸，先渲染頁(yè)面上所有的ul標(biāo)簽澳淑，再去尋找id為test的元素，而.text{}則是直接匹配到class="text"所在的元素插佛。
【注】以上的案列均來(lái)自張?chǎng)涡竦募夹g(shù)博客
參考資料
