| |
坦率的說(shuō)，我寫(xiě)CSS時(shí)，有至少1/4的時(shí)間是在糾結(jié)選擇符該如何命名。隨意的命名，會(huì)讓你陷入尷尬。
舉個(gè)例子，我們需要在一段文字里將某些詞標(biāo)紅。所以為此建了一個(gè).red { color: red; }。結(jié)果產(chǎn)品經(jīng)理覺(jué)得，紅色太刺眼了，改成橘色比較好吧。這下頭大啦，難道寫(xiě)成.red { color: orange; }么？要不然就是把HTML里的每個(gè)class="red"改成class="orange"？
在過(guò)去幾年時(shí)間里，我經(jīng)常遇到這樣的尷尬。因此作為一些經(jīng)驗(yàn)之談，我整理出以下的幾個(gè)命名原則：
原則一：CSS選擇符命名應(yīng)該體現(xiàn)結(jié)構(gòu)而不是樣式。
這句話(huà)聽(tīng)起來(lái)很奇怪。這樣不是違反了結(jié)構(gòu)和樣式分離的原則么？恰恰相反，其實(shí)正是遵循分離原則。要知道，CSS選擇符名真正的用處是在HTML代碼里修飾標(biāo)簽。所以它其實(shí)應(yīng)該被看作結(jié)構(gòu)的一部分。因此選擇符的名字不可以跟樣式有關(guān)。
我開(kāi)頭將的那個(gè)例子，就是違反這一原則典型。正確的寫(xiě)法，應(yīng)該是.highlight { color: red; }，或者索性就用em { color: red; font-style:normal; }。
同理，我盡量避免用帶有l(wèi)eft、right、顏色、bold等字眼的名字，總而言之，那些可以被作為CSS屬性值的名字，都盡量少用作名字。
有時(shí)候，我們會(huì)遇到另一種情況。有一個(gè)很常見(jiàn)的布局：標(biāo)題放在區(qū)塊的左上方，而右上方是一個(gè)“查看更多”的鏈接。所以我們會(huì)用這樣的代碼
＜h2>
＜span>＜a href="#">查看更多＜/a>＜/span>
精彩貼圖
＜/h2>
自然，會(huì)有相應(yīng)的樣式：
h2 span {float:right;}
但是這樣做其實(shí)很危險(xiǎn)。如果我們要求給標(biāo)題后再加一個(gè)副標(biāo)題（比如“超過(guò)1000萬(wàn)精美圖片”之類(lèi)的惡俗標(biāo)語(yǔ)），就沒(méi)法再用span了。用strong或是em，其實(shí)感覺(jué)怪怪的。
原則二：不要輕易將特殊樣式直接賦給常用的HTML標(biāo)簽
上面那個(gè)例子的問(wèn)題就在于，輕易的將樣式應(yīng)用在span這種常用的標(biāo)簽上了。h2 span這種選擇符，意味著你認(rèn)為h2里所有的span都要使用右浮動(dòng)。但是這樣的判斷顯然是很武斷的。
另一個(gè)例子是，喜歡用ul.top10 li這種選擇符。這樣用并非不可，但請(qǐng)先確保這個(gè)排行榜里只是純文字。倘若有一天產(chǎn)品經(jīng)理發(fā)現(xiàn)，似乎應(yīng)該把前三個(gè)的信息寫(xiě)得更詳細(xì)，就意味著你可能需要用到下面這種結(jié)構(gòu)：
＜ul class="top">
＜li>
＜div class="product">
＜h6>產(chǎn)品名稱(chēng)＜/h6>
＜ul>
＜li>型號(hào)：XXX＜/li>
...
＜/ul>
＜div>
＜/li>
＜/ul>
這下又傻眼了吧。只能用.top20 .product li {}去覆蓋掉之前的樣式。
我比較傾向的寫(xiě)法，是如 ul.top20 li.item這樣寫(xiě)。（當(dāng)然，CSS2準(zhǔn)備了更多更精準(zhǔn)的后代選擇器，就犯不著這個(gè)了。等待IE8吧~~）
原則三：設(shè)計(jì)好一系列的“全局保留字”，以避免命名沖突
一些常用的單詞，就不要用作特殊樣式的名字。比如，我們會(huì)經(jīng)常用到如下的選擇符：
.tab li.current
或者
.nav li.current
以表示當(dāng)前激活的標(biāo)簽或選項(xiàng)。很多樣式都會(huì)用到“current”這個(gè)單詞，為了避免彼此的樣式?jīng)_突，有一個(gè)很簡(jiǎn)單的辦法，就是人為商定，單純的.current樣式不作任何定義。換句話(huà)說(shuō)，current這個(gè)名字只能出現(xiàn)在精確的后代選擇符中。
類(lèi)似的還有：
“.active”：和current差不多，有人也喜歡用這個(gè)
“.first”：經(jīng)常在如“ 選項(xiàng) 選項(xiàng) 選項(xiàng)”的結(jié)構(gòu)中用到
“.last”：在田字格布局中可能會(huì)用到
“.hover”：有時(shí)候需要用這個(gè)樣式結(jié)合JS實(shí)現(xiàn)一些效果
“.text”、“.button”、“.submit”等：在屬性選擇器普及前，input標(biāo)簽的樣式都靠它們了。
原則四：英文要正確
哎，這只能怪計(jì)算機(jī)是美國(guó)人發(fā)明的了。有時(shí)候會(huì)看到一些奇怪的選擇符名。我解釋一些常用單詞的含義：
header，footer：
這兩個(gè)的意思是指“頭部”和“底部”，更確切點(diǎn)講是“頁(yè)頭”和“頁(yè)尾”。
heading，footing： 本新聞共 2頁(yè),當(dāng)前在第 1頁(yè) 1 2 |
|
|
| 【收藏】【打印】【進(jìn)入論壇】 |
|
|
|
|
| |
|
|
|
