|
我在“CSS樣式分離之再分離”一文中就展示過這種命名了，分離為什么可以讓樣式的重用性放大至最大，就是因為分離后樣式的命名就是樣式本身。
就拿上面人人網(wǎng)的標題樣式舉例，人人網(wǎng)的做法是：
.side-item-header{padding:0 0 8px; text-align:right;}
要是我，我會對其進行分離。在實際項目時，text-align:right;這個屬性早就在CSS通用樣式庫里面了，而padding:0 0 8px;則會以padding-bottom:8px;的形式放在網(wǎng)站通用樣式庫里了（詳細請參見我的“我是如何對網(wǎng)站CSS進行架構的”一文）。最后，CSS命名與樣式會如下：
.tr{text-align:right;}
.pb8{padding-bottom:8px;}
而這里分離出來的樣式又可以被其他地方使用。是不是有點“吸星大法”的感覺。
當然，如果網(wǎng)站本身的架構不是對每個側欄內容進行模塊化處理的話，說實話，這里標題的分離還是有點危險的。想想看，如果那天產(chǎn)品經(jīng)理說底部padding值要改成10像素，啊哦，如果你的網(wǎng)站架構不合理，含這類標題的模塊到處塞，會改到你急火攻心，吐血三升而亡的。所以，對于分離，我反復強調，“千萬不要對網(wǎng)站通用的元素進行分離”。
所以，記住精簡高效的CSS命名準則之一：對于網(wǎng)站非通用元素，如果樣式簡單(1~2個屬性)，對其分離并使用面向屬性的命名方法。
四、精簡高效CSS命名之“三無原則”
此“三無原則”就是：無ID，無層級，無標簽
CSS命名就應該最簡單、最直接，直搗黃龍。沒有HTML標簽，沒有層級，這些通通滾蛋，不要。為什么不要，有三大原因：
1. 限制重用
我們會使用層級(#test .test)，會使用標簽(ul.test)，可能是習慣(沒多想)，或是為了避免沖突。但是，我跟你說，從今以后，這種寫法讓他見鬼去吧（如果不是為了改變CSS優(yōu)先級的話）。正如開篇論述的哲學觀點，你限制越多，越抑制了CSS的重用性。例如#test .test{}這種寫法，里面的CSS重用性多大，完全限死在了id為test的元素下，哪有重用性可言；又如ul.test，我勒個去，這個ul標簽十有八九就是裝飾用的，往這兒一放，同樣CSS樣式的div標簽可以用嗎？哭爹喊娘，眼淚汪汪也不管用啊。所以，相信我，層級啊，標簽啊什么的，通通見鬼去吧。
要知道，層級啊，標簽啊作用是什么，是用來提高CSS優(yōu)先級，把那個字母長的讓人發(fā)毛的”!important”干掉的。
2. CSS文件大小
出處：zhangxinxu
責任編輯：bluehearts
上一頁 精簡高效的CSS命名準則和方法 [2] 下一頁 精簡高效的CSS命名準則和方法 [4]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 3 頁 精簡高效的CSS命名準則和方法 [3]
