DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS樣式命名規則
CSS樣式命名規則
編輯:CSS詳解     

相信大家對樣式命名都多少感到困難,特別是想起一個有意義的名,更難。回顧了一下之前寫的《 樣式命名規則 》(不知道大家使用後有什麼感想)結合這段時間使用上發現的一些問題,重新整理了樣式的命名規則,希望能更實用些。

要避免當狀態改變時名稱失去意義,最常見的就是用於布局的類名,如“left”、“right”,當左邊欄不再是左邊欄的時候,“left”這個名就沒有實際意義了。這與我們所推薦的“命名要有意義”就相違背了,使用序號就更加有問題了。好像沒錯,不過有好長一段時間都有個問題讓我很煩惱,如果一個頁面中同個模塊出現一次以上,而且細節還不一樣,那後面出現的名稱應該叫什麼呢?難道“one”、“two”就不是序號?其實我們要避免遇到的情況就是當狀態(表現)改變時,對應定義的類名不會失去意義。

所謂的狀態(表現)改變,有幾種情況:

  1. Html不變,樣式定義改變。如果命名使用了表示某一狀態的名稱,如“red“、“font14“等,必定會引起定義與命名不符的情況,對後繼的影響會造成比較大的影響。
  2. 樣式定義不變,Html改變。Html改變意味著類名可更換,也就是如果類名使用了表示某一狀態的名稱,反而更有利於修改。
  3. 樣式定義與Html都改變。只需要考慮不要出現第一種情況的結果就可以了。

而實際情況並不是單純的某一種情況,更多的時候是混雜著出現的。有點遠了,回主題。

規則

[ 模塊前綴 ] _ 類型 _ ( 作用 | 狀態 ) n _ [ 位置 n ]

圖例說明:

  • ( 必選 ):必需存在。
  • [ 可選 ]:可根據需要選擇。
  • |:多選一。
  • n:可有多個。

名詞說明:

模塊前綴
模塊定義時使用的前綴。
類型
定義類的內容類型。如輸入框、文本、段落等等。
作用
定義類的作用,用於對類型的補充。
狀態
定義類的狀態,用於對類型的補充。
位置
定義類所使用的位置,如首頁、導航等等,不排除使用左、右這樣的詞,但應盡量避免。
  • 每項都可有自己的一個縮寫表,同一名稱的縮寫盡量統一。
  • 所選用的單詞應選擇不過於具體表示某一狀態(如顏色、大小等)的單詞,以避免當狀態改變時名稱失去意義。
  • 由不以數字開頭的小寫字母(a-z)、數字(0-9)組成。
  • 確保類(.class)的重用性與對象(#id)的唯一性,id避免使用保留字。

例:

模塊前綴:

  • 彈出 pop
  • 公共 global,gb
  • 標題 title,tit
  • 提示 hint
  • 菜單 menu
  • 信息 info
  • 預覽 pvw
  • Tips tips
  • 導航 nav

類型:

  • 按鈕 bt
  • 文本 tx
  • 段落 p
  • 圖標 icon
  • input input
  • 顏色 color,c
  • 背景 bg
  • 邊框 bor

作用:

  • 設置 set
  • 添加 add
  • 刪除 del
  • 操作 op
  • 密碼 pw
  • 導入 inc

狀態:

  • 成功 suc
  • 失敗 lost
  • 透明 tran

位置:

  • 公共 gb
  • 邊框 bor
  • 段落 p
  • 彈出 pop
  • 標題 title,tit
  • 菜單 menu
  • 內容 cont
  • 導航 nav
中文解釋 命名 中文解釋 命名 文本輸入框 .input_tx 段落文本顏色 .tx_c_p 密碼輸入框 .input_pw 相冊彈出的設置層 .pop_set_photo 登錄密碼輸入框 .input_pw_login 日志設置成功提示 .hint_suc_blogset 文本顏色 .tx_c 公共提示 .hint_gb

問幾個簡單的問題,可以幫助我們完成命名:

  1. “什麼類型的定義?”——是個輸入框,input。
  2. “類型補充說明”——如果一個詞說明不清楚,那麼補充說明類型,文本輸入框,input_tx。
  3. “在哪使用?”——定義要使用的位置在哪?首頁的搜索文本輸入框,input_search_index。

可能無法覆蓋到所有的情況,但相信能解決70%~80%的命名問題。如果結合“模塊化”相關的方法去定義,其實所需要定義的名稱並不需要很多。如:“hint_tx”表示提示模塊的文字定義,“hit_tx_hint”表示提示裡文字強調的定義,至於是改變顏色還是加粗,這個就看不同提示模塊的需要了。

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