網頁制作poluoluo文章簡介：相信大家對樣式命名都多少感到困難，特別是想起一個有意義的名，更難。回顧了一下之前寫的《 樣式命名規則 》（不知道大家使用後有什麼感想）結合這段時間使用上發現的一些問題，重新整理了樣式的命名規則，希望能更實用些。
相信大家對樣式命名都多少感到困難，特別是想起一個有意義的名，更難。回顧了一下之前寫的《 樣式命名規則 》（不知道大家使用後有什麼感想）結合這段時間使用上發現的一些問題，重新整理了樣式的命名規則，希望能更實用些。
要避免當狀態改變時名稱失去意義，最常見的就是用於布局的類名，如“left”、“right”，當左邊欄不再是左邊欄的時候，“left”這個名就沒有實際意義了。這與我們所推薦的“命名要有意義”就相違背了，使用序號就更加有問題了。好像沒錯，不過有好長一段時間都有個問題讓我很煩惱，如果一個頁面中同個模塊出現一次以上，而且細節還不一樣，那後面出現的名稱應該叫什麼呢？難道“one”、“two”就不是序號？其實我們要避免遇到的情況就是當狀態（表現）改變時，對應定義的類名不會失去意義。
所謂的狀態（表現）改變，有幾種情況：
- HTML不變，樣式定義改變。如果命名使用了表示某一狀態的名稱，如“red“、“font14“等，必定會引起定義與命名不符的情況，對後繼的影響會造成比較大的影響。
- 樣式定義不變，HTML改變。HTML改變意味著類名可更換，也就是如果類名使用了表示某一狀態的名稱，反而更有利於修改。
- 樣式定義與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
狀態：
位置：
- 公共 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
問幾個簡單的問題，可以幫助我們完成命名：
- “什麼類型的定義？”——是個輸入框，input。
- “類型補充說明”——如果一個詞說明不清楚，那麼補充說明類型，文本輸入框，input_tx。
- “在哪使用？”——定義要使用的位置在哪？首頁的搜索文本輸入框，input_search_index。
可能無法覆蓋到所有的情況，但相信能解決70%~80%的命名問題。如果結合“模塊化”相關的方法去定義，其實所需要定義的名稱並不需要很多。如：“hint_tx”表示提示模塊的文字定義，“hit_tx_hint”表示提示裡文字強調的定義，至於是改變顏色還是加粗，這個就看不同提示模塊的需要了。