DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS選擇符命名的幾個原則
CSS選擇符命名的幾個原則
編輯: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屬性值的名字,都盡量少用作名字。
  有時候,我們會遇到另一種情況。有一個很常見的布局:標題放在區塊的左上方,而右上方是一個“查看更多”的鏈接。所以我們會用這樣的代碼

<h2>
    <span><a href="#">查看更多</a></span>
    精彩貼圖
</h2>


  自然,會有相應的樣式:

  h2 span {float:right;}

  但是這樣做其實很危險。如果我們要求給標題後再加一個副標題(比如“超過1000萬精美圖片”之類的惡俗標語),就沒法再用span了。用strong或是em,其實感覺怪怪的。

  原則二:不要輕易將特殊樣式直接賦給常用的HTML標簽

  上面那個例子的問題就在於,輕易的將樣式應用在span這種常用的標簽上了。h2 span這種選擇符,意味著你認為h2裡所有的span都要使用右浮動。但是這樣的判斷顯然是很武斷的。

  另一個例子是,喜歡用ul.top10 li這種選擇符。這樣用並非不可,但請先確保這個排行榜裡只是純文字。倘若有一天產品經理發現,似乎應該把前三個的信息寫得更詳細,就意味著你可能需要用到下面這種結構:

<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吧~~)

  原則三:設計好一系列的“全局保留字”,以避免命名沖突

  一些常用的單詞,就不要用作特殊樣式的名字。比如,我們會經常用到如下的選擇符:

  .tab li.current
  或者
  .nav li.current

  以表示當前激活的標簽或選項。很多樣式都會用到“current”這個單詞,為了避免彼此的樣式沖突,有一個很簡單的辦法,就是人為商定,單純的.current樣式不作任何定義。換句話說,current這個名字只能出現在精確的後代選擇符中。

  類似的還有:

  “.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:提示。可以用作輸入框旁邊的文字,或是彈出的提示框。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved