|
所以，CSS命名，只要出現(xiàn)了層級(jí)，出現(xiàn)了標(biāo)簽，就是一次額外的渲染，層級(jí)越多，渲染的開銷也就越大，這就是為什么一些前輩的文章會(huì)建議要盡量避免過深的層級(jí)。這也是為什么要“無層級(jí)”，“無標(biāo)簽”。
對(duì)于原則第一條“無ID”，其實(shí)與性能沒有多大關(guān)系，只是一般ID都與JavaScript有奸情，如果再牽扯到CSS樣式，如此復(fù)雜的三角關(guān)系，日后不好處理啊。
五、“三無原則”遺留之樣式?jīng)_突問題
正如上面講的，層級(jí)，標(biāo)簽可以避免樣式?jīng)_突，雖然“面向?qū)傩缘拿辈淮嬖跊_突問題，但是，頁面上很多樣式是無法分離使用“面向?qū)傩缘拿钡�，此時(shí)，一不能有層級(jí)，二不能有標(biāo)簽，如果避免沖突呢？
首先，規(guī)范。項(xiàng)目組所有人的命名方法，習(xí)慣都要統(tǒng)一。其次，也是實(shí)際的做法，同一內(nèi)容，使用同一前綴。就如上面的那張圖片所示，所有class同一使用od前綴，這樣，就絕不會(huì)與其他頁面的CSS產(chǎn)生沖突了。
現(xiàn)在，還隱藏著一個(gè)會(huì)讓人心存疑惑的遺留問題。如下：
上圖中，很多個(gè)鏈接全部存放在一個(gè)標(biāo)簽中，全部都是a標(biāo)簽，按照我的“三無原則”，不能使用層級(jí)，那么，我這里的每個(gè)a標(biāo)簽都得附一個(gè).index_list_a{}這樣子的命名嗎，這樣子repeat下來，頁面HTML代碼豈不是很大，直接來個(gè).index_list_box a{}，豈不是頁面HTML更加清爽。確實(shí)有理。實(shí)際上，按照我個(gè)人實(shí)踐的經(jīng)驗(yàn)，這類細(xì)小重復(fù)的列表元素的樣式都是比較簡(jiǎn)單的，不要忘了，精簡(jiǎn)高效的CSS命名準(zhǔn)則之一的“分離與面向?qū)傩悦�，所以，�?duì)這里的a標(biāo)簽進(jìn)行面向?qū)傩缘拿瑱?quán)衡后期的重用性和HTML代碼開銷，還是直接針對(duì)a標(biāo)簽進(jìn)行簡(jiǎn)單命名是最佳解決方案。
但是，不排除這類最內(nèi)層標(biāo)簽且重復(fù)元素的樣式會(huì)很復(fù)雜，此時(shí)，使用層級(jí)與標(biāo)簽，或許是更好的做法，但這只存在于一些非常特殊的情況。
對(duì)了，我們看看點(diǎn)評(píng)網(wǎng)是如何對(duì)最內(nèi)層且重復(fù)的a標(biāo)簽進(jìn)行處理的，如下圖：
點(diǎn)評(píng)網(wǎng)是使用的一個(gè)大寫的”B”作為此樣式，無論這里的”B”是有background之意，還是邪惡的***之意，其命名比“面向?qū)傩悦备跻换I，可以說是接近真正意義上的nothing，后面可以跟任意屬性，用在任意頁面，這就是“無”哲學(xué)，“無”的境界。//zxx:點(diǎn)評(píng)網(wǎng)的這個(gè)命名讓我聞到了一點(diǎn)Google的氣息
六、結(jié)語
現(xiàn)在，來個(gè)簡(jiǎn)短的總結(jié)，精簡(jiǎn)高效的CSS命名的關(guān)鍵字有“分離”，“統(tǒng)一前綴”，方法為“面向?qū)傩缘拿�，�?zhǔn)則為“無層級(jí)、無標(biāo)簽”。
其中，“分離”是“面向?qū)傩悦钡幕A(chǔ)。“面向?qū)傩悦焙汀盁o層級(jí)、無標(biāo)簽”屬于兩個(gè)不同的系列，一個(gè)針對(duì)短命名屬性，一個(gè)針對(duì)長(zhǎng)命名屬性。但是，兩個(gè)又互相依存。沒有“面向?qū)傩悦�，“無層級(jí)、無標(biāo)簽”命名最后是以不堪重負(fù)，HTML膨脹致死結(jié)局。而僅僅是“面向?qū)傩悦保岸碎_發(fā)人員會(huì)因維護(hù)過勞噴血而死�？傊瑑烧呷币徊豢�。
上述所有內(nèi)容，都是根據(jù)自己的開發(fā)總結(jié)出來的東西，個(gè)人觀點(diǎn)，經(jīng)驗(yàn)之談。每個(gè)人的成長(zhǎng)不同，工作環(huán)境不同，必然在看到一些問題上會(huì)有差異，歡迎交流與討論。我資歷尚淺，文中難免會(huì)有不準(zhǔn)確的地方，歡迎指正。
我的這套準(zhǔn)則是建立在自己的一套CSS架構(gòu)上的，我自己用的是非常開心的，而且效果非常明顯。但是，到底是否適用于其他同行，我不能保證，畢竟優(yōu)秀的前端人員心中都有自己的那一套準(zhǔn)則。我的個(gè)人建議是這樣的，如果您還是個(gè)CSS新手，或者對(duì)我文中提到的一些概念不太理解，我覺得全搬過來不太合適。您可以保留您之前那種一步一趨的寫法，然后在這基礎(chǔ)上做您確定的改進(jìn)。如果真能對(duì)您CSS的學(xué)習(xí)提供一些幫助與啟示，那真是再好不過了。
原文：http://www.zhangxinxu.com/wordpress/?p=1098
本文鏈接：http://m.95time.cn/tech/web/2010/7972.asp 
出處：zhangxinxu
責(zé)任編輯：bluehearts
上一頁 精簡(jiǎn)高效的CSS命名準(zhǔn)則和方法 [4] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 
第 5 頁 精簡(jiǎn)高效的CSS命名準(zhǔn)則和方法 [5]
