需要遵循CSS選擇符命名的四個原則

坦率的說，我寫CSS時，有至少1/4的時間是在糾結選擇符該如何命名。隨意的命名，會讓你陷入尷尬。 
　　舉個例子，我們需要在一段文字裏將某些詞標紅。所以爲此建了一個.red { color: red; }。結果產品經理覺得，紅色太刺眼了，改成橘色比較好吧。這下頭大啦，難道寫成.red { color: orange; }麼？要不然就是把HTML裏的每個class="red"改成class="orange"？ 
　　在過去幾年時間裏，我經常遇到這樣的尷尬。因此作爲一些經驗之談，我整理出以下的幾個命名原則： 
　　原則一：CSS選擇符命名應該體現結構而不是樣式。 
　　這句話聽起來很奇怪。這樣不是違反了結構和樣式分離的原則麼？恰恰相反，其實正是遵循分離原則。要知道，CSS選擇符名真正的用處是在HTML代碼裏修飾標籤。所以它其實應該被看作結構的一部分。因此選擇符的名字不可以跟樣式有關。 
　　我開頭將的那個例子，就是違反這一原則典型。正確的寫法，應該是.highlight { color: red; }，或者索性就用em { color: red; font-style:normal; }。 
　　同理，我儘量避免用帶有left、right、顏色、bold等字眼的名字，總而言之，那些可以被作爲CSS屬性值的名字，都儘量少用作名字。 
　　有時候，我們會遇到另一種情況。有一個很常見的佈局：標題放在區塊的左上方，而右上方是一個“查看更多”的鏈接。所以我們會用這樣的代碼 
Example Source Code [www.52css.com] 
<h2> 
     <span><a href="#">查看更多</a></span> 
     精彩貼圖 
</h2> 
　　自然，會有相應的樣式： 
　　h2 span {float:right;} 
　　但是這樣做其實很危險。如果我們要求給標題後再加一個副標題（比如“超過1000萬精美圖片”之類的惡俗標語），就沒法再用span了。用strong或是em，其實感覺怪怪的。 
　　原則二：不要輕易將特殊樣式直接賦給常用的HTML標籤 
　　上面那個例子的問題就在於，輕易的將樣式應用在span這種常用的標籤上了。h2 span這種選擇符，意味着你認爲h2裏所有的span都要使用右浮動。但是這樣的判斷顯然是很武斷的。 
　　另一個例子是，喜歡用ul.top10 li這種選擇符。這樣用並非不可，但請先確保這個排行榜裏只是純文字。倘若有一天產品經理髮現，似乎應該把前三個的信息寫得更詳細，就意味着你可能需要用到下面這種結構： 
Example Source Code [www.52css.com] 
<ul class="top"> 
     <li> 
         <div class="product"> 
             <h6>產品名稱</h6> 
             <ul> 
                   <li>型號：XXX</li> 
                   ... 
             </ul> 
         <div> 
     </li> 
</ul> 
　　這下又傻眼了吧。只能用.top20 .product li {}去覆蓋掉之前的樣式。 
　　我比較傾向的寫法，是如 ul.top20 li.item這樣寫。（當然，CSS2準備了更多更精準的後代選擇器，就犯不着這個了。等待IE8吧~~） 
　　原則三：設計好一系列的“全局保留字”，以避免命名衝突 
　　一些常用的單詞，就不要用作特殊樣式的名字。比如，我們會經常用到如下的選擇符： 
Example Source Code [www.52css.com] 
　　.tab li.current 
　　或者 
　　.nav li.current 
　　以表示當前激活的標籤或選項。很多樣式都會用到“current”這個單詞，爲了避免彼此的樣式衝突，有一個很簡單的辦法，就是人爲商定，單純的.current樣式不作任何定義。換句話說，current這個名字只能出現在精確的後代選擇符中。 
　　類似的還有： 
Example Source Code [www.52css.com] 
　　“.active”：和current差不多，有人也喜歡用這個 
　　“.first”：經常在如“ 選項 | 選項 | 選項”的結構中用到 
　　“.last”：在田字格佈局中可能會用到 
　　“.hover”：有時候需要用這個樣式結合JS實現一些效果 
　　“.text”、“.button”、“.submit”等：在屬性選擇器普及前，input標籤的樣式都靠它們了。 
　　原則四：英文要正確 
　　哎，這隻能怪計算機是美國人發明的了。有時候會看到一些奇怪的選擇符名。我解釋一些常用單詞的含義： 
　　header，footer： 
　　這兩個的意思是指“頭部”和“底部”，更確切點講是“頁頭”和“頁尾”。 
　　heading，footing： 
　　heading的意思是“標題、題目”，<h1>的h就是heading的縮寫。 
　　footing的意思是“註腳”。 
　　所以呢，我的看法是，整個頁面的頂部和底部用header和footer，而區塊的標題和底部用heading和footing。 
　　caption： 
　　這個詞的意思也是“標題”，但是它特指“圖片的文字說明”。所以記得用在圖片底部的文字。 
　　primary，secondary： 
　　這兩個詞是“首要”“次要”。它們往往是指同級別的事物，只是重要性不同。比如提交按鈕和取消按鈕。 
　　main，sub： 
　　這兩個詞纔是上下級關係。如“主菜單”和“子菜單”。 
　　top，middle，bottom： 
　　這裏主要是“中”這個詞。“上中下”裏的“中”是用middle。參見text-align屬性。 
　　left，center，right： 
　　“左中右”的“中”是center。參見vertical-align。 
　　此外，還有一些常用的詞語： 
　　rating：打分 
　　rank：“第幾位” 
　　showcase：展示櫥窗，可以用作一行五個這種排布。 
　　category：分類 
　　thumbnail：縮略圖 
　　snapshot：截圖。這個單詞的意思是“快照”，所以一般指原大小。 
　　breadcrumbs、pathway：這兩個都可以用來指這個東西：“首頁 > 二級頁面 > 內容頁” 
　　quicklinks：這個可以用作頁面右上角的“ 登錄 | 幫助 | 客服 ”，也可以指頁面底部的“ 關於我們 | 網站地圖 ” 
　　tip：提示。可以用作輸入框旁邊的文字，或是彈出的提示框。