|
我想我們都希望寫出精簡高效的CSS代碼，如果CSS重用性越高，想必就越高效。這如人的名字一樣，如果名字越普通，越?jīng)]有含義，越容易被重用，所以CSS要想重用性高，就需要命名簡單。但是，簡單的命名越容易造成樣式?jīng)_突，例如.more{}。從這點上來說，重用性與樣式?jīng)_突時兩個對立的矛盾體。
不過，萬幸的是，這種矛盾并不是不可調(diào)和的。記住一些準(zhǔn)則/方法，CSS既可以有高度的重用性，又不會有樣式?jīng)_突的困擾。下面就將介紹這些命名方法。
三、面向?qū)傩缘拿椒?/strong>
我們習(xí)慣在CSS命名的時候摻雜語義，這樣可以讓代碼更易懂。例如淘寶首頁“免費注冊”按鈕上的class名稱：help-guest-regist
上面的class命名語義就很明顯，獨眼龍看告示——一目了然，”help-guest-regist”就是”幫助-顧客-注冊”，很nice，很人性化的命名。
作為在單一的首頁上使用，我是很難挑出什么毛病來的。
但是，從道家“無”的哲學(xué)思想來看，語義其實是對自身的一種束縛，越是語義強烈的命名越是沒有重用性（尤其是內(nèi)容語義的）。舉個實際點的例子，例如人人網(wǎng)的右側(cè)邊欄的標(biāo)題：//zxx:一般找這類反例我就喜歡找人人網(wǎng)還有新浪，基本上一找一個準(zhǔn)。人人網(wǎng)雖然外表長得跟facebook類似，但是就CSS而言，差距不是一兩個檔次的。
這個標(biāo)題的class名是”side-item-header”，樣式如下圖所示：
現(xiàn)在一切ok，現(xiàn)在設(shè)想下，如果頁面中間的模塊有個標(biāo)題，其樣式也是：
{padding:0 0 8px; text-align:right;}
那你發(fā)現(xiàn)前面已經(jīng)有一模一樣的CSS樣式后，你會怎么辦。把中間的標(biāo)題也用”side-item-header”這個class嗎？這里”side”就是表示“邊”的意思，這就意味著這個樣式用在非側(cè)邊欄就是不合理的。你能做的估計即使新命名一個class，就像是”body-item-header”，明明是同樣的CSS屬性，結(jié)果卻不能重用（即使使用標(biāo)識符組合并CSS，這里的命名也是沒有重用的）。
可見命名不合理會大大限制你的CSS重用性。如何命名才能讓CSS發(fā)揮最大的重用性潛力呢？答案就是“面向?qū)傩缘拿�。這種命名就是要讓你把頁面啊設(shè)計啊什么的通通塞到馬桶里沖走，不要管頁面什么位置，什么內(nèi)容，there is noting, 這兒什么都沒有，既然什么都沒有，也就沒有了任何限制，于是CSS可以自由出入于任何地方，無限重用，而且不用擔(dān)心沖突，因為“面向?qū)傩缘拿本褪轻槍ψ陨韺傩缘囊环N命名方式，只會overwrite，不會沖突。
相比很多同行都用過這樣的命名方式，只是不夠系統(tǒng)，不夠大膽、徹底，多淺嘗輒止，比如像是開心網(wǎng)，還有時光網(wǎng)的CSS代碼的前面一部分樣式命名：
出處：zhangxinxu
責(zé)任編輯：bluehearts
上一頁 精簡高效的CSS命名準(zhǔn)則和方法 [1] 下一頁 精簡高效的CSS命名準(zhǔn)則和方法 [3]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 精簡高效的CSS命名準(zhǔn)則和方法 [2]
