|
這瓜子雖小，吃多了也是可以填飽肚子的。所以，你的CSS名稱不要像老太太的裹腳布一樣，搞得又臭又長，如下圖所示的人人網(wǎng)那個(gè)冗長的CSS命名吧：
你看名稱的字節(jié)數(shù)已經(jīng)比屬性還大了，要是這些名稱都在15字符以內(nèi)，乖乖，這個(gè)CSS文件可以小個(gè)1~2K絕對(duì)沒有問題的。你看下圖這樣子的命名，這樣子的CSS排版是不是更舒服，更簡潔。
3. 降低了渲染效率
來個(gè)例子考考大家（以后我面試別人可能就會(huì)考這題），HTML如下：
<div id="test">
<ul class="test"></ul>
</div>
現(xiàn)在要給這里的ul標(biāo)簽一個(gè)樣式，比如說padding-left:25px;那么下面四種寫法哪個(gè)渲染速度最快？
#test .test{}， ul.test{}，#test ul{} 以及.test{}.
如果單純的ul與.test PK，我還真拿不定誰的渲染速度更快些。但是，一旦牽扯到層級(jí)與標(biāo)簽，我100%確定，.test這種最直接的命名方式渲染效率是最高的。要知道，CSS渲染元素和使用JavaScript獲取頁面元素那是完全不一樣的。如果是使用JavaScript獲取DOM元素，則#test ul{}速度是最快的，先id獲取，再tag獲取，這些可都是JavaScript內(nèi)置的方法。但是，CSS的渲染方式則是屬于外太空系的了，《高性能網(wǎng)站進(jìn)階指南》一書曾提到CSS的渲染方式是“從右往左”渲染的，就拿#test ul{}舉例，先渲染頁面上所有的ul標(biāo)簽，再去尋找id為test的元素，所以，出現(xiàn)#test div{}這種寫法的人都是傻×的，頁面先渲染id為test的元素？非也！先渲染頁面上所有的div，再去尋找其老爸有沒有id為test的元素。由于這種渲染差異最大就200~300毫秒，我們?nèi)艘话闶歉杏X不到的。所以，長久以來，也都不以為然。但是，我是絕對(duì)容不下這種寫法的，還有，要是讓我看到類似于ul#test{}這樣子的命名，不好意思，面試肯定過不了。
出處：zhangxinxu
責(zé)任編輯：bluehearts
上一頁 精簡高效的CSS命名準(zhǔn)則和方法 [3] 下一頁 精簡高效的CSS命名準(zhǔn)則和方法 [5]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 
第 4 頁 精簡高效的CSS命名準(zhǔn)則和方法 [4]
