相信大家對(duì)樣式命名都多少感到困難，特別是想起一個(gè)有意義的名，更難。回顧了一下之前寫(xiě)的《 樣式命名規(guī)則 》（不知道大家使用后有什么感想）結(jié)合這段時(shí)間使用上發(fā)現(xiàn)的一些問(wèn)題，重新整理了樣式的命名規(guī)則，希望能更實(shí)用些。

要避免當(dāng)狀態(tài)改變時(shí)名稱(chēng)失去意義，最常見(jiàn)的就是用于布局的類(lèi)名，如“left”、“right”，當(dāng)左邊欄不再是左邊欄的時(shí)候，“left”這個(gè)名就沒(méi)有實(shí)際意義了。這與我們所推薦的“命名要有意義”就相違背了，使用序號(hào)就更加有問(wèn)題了。好像沒(méi)錯(cuò)，不過(guò)有好長(zhǎng)一段時(shí)間都有個(gè)問(wèn)題讓我很煩惱，如果一個(gè)頁(yè)面中同個(gè)模塊出現(xiàn)一次以上，而且細(xì)節(jié)還不一樣，那后面出現(xiàn)的名稱(chēng)應(yīng)該叫什么呢？難道“one”、“two”就不是序號(hào)？其實(shí)我們要避免遇到的情況就是當(dāng)狀態(tài)（表現(xiàn)）改變時(shí)，對(duì)應(yīng)定義的類(lèi)名不會(huì)失去意義。

所謂的狀態(tài)（表現(xiàn)）改變，有幾種情況：

1. HTML不變，樣式定義改變。如果命名使用了表示某一狀態(tài)的名稱(chēng)，如“red“、“font14“等，必定會(huì)引起定義與命名不符的情況，對(duì)后繼的影響會(huì)造成比較大的影響。
2. 樣式定義不變，HTML改變。HTML改變意味著類(lèi)名可更換，也就是如果類(lèi)名使用了表示某一狀態(tài)的名稱(chēng)，反而更有利于修改。
3. 樣式定義與HTML都改變。只需要考慮不要出現(xiàn)第一種情況的結(jié)果就可以了。

而實(shí)際情況并不是單純的某一種情況，更多的時(shí)候是混雜著出現(xiàn)的。有點(diǎn)遠(yuǎn)了，回主題。

規(guī)則

[ 模塊前綴 ] _ 類(lèi)型 _ ( 作用 | 狀態(tài) ) n _ [ 位置 n ]

圖例說(shuō)明：

• ( 必選 )：必需存在。
• [ 可選 ]：可根據(jù)需要選擇。
• |：多選一。
• n：可有多個(gè)。

名詞說(shuō)明：

模塊前綴

模塊定義時(shí)使用的前綴。

類(lèi)型

定義類(lèi)的內(nèi)容類(lèi)型。如輸入框、文本、段落等等。

作用

定義類(lèi)的作用，用于對(duì)類(lèi)型的補(bǔ)充。

狀態(tài)

定義類(lèi)的狀態(tài)，用于對(duì)類(lèi)型的補(bǔ)充。

位置

定義類(lèi)所使用的位置，如首頁(yè)、導(dǎo)航等等，不排除使用左、右這樣的詞，但應(yīng)盡量避免。

• 每項(xiàng)都可有自己的一個(gè)縮寫(xiě)表，同一名稱(chēng)的縮寫(xiě)盡量統(tǒng)一。
• 所選用的單詞應(yīng)選擇不過(guò)于具體表示某一狀態(tài)（如顏色、大小等）的單詞，以避免當(dāng)狀態(tài)改變時(shí)名稱(chēng)失去意義。
• 由不以數(shù)字開(kāi)頭的小寫(xiě)字母（a-z）、數(shù)字（0-9）組成。
• 確保類(lèi)(.class)的重用性與對(duì)象(#id)的唯一性，id避免使用保留字。

例：

模塊前綴：

• 彈出 pop
• 公共 global,gb
• 標(biāo)題 title,tit
• 提示 hint
• 菜單 menu
• 信息 info
• 預(yù)覽 pvw
• Tips tips
• 導(dǎo)航 nav

類(lèi)型：

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

作用：

• 設(shè)置 set
• 添加 add
• 刪除 del
• 操作 op
• 密碼 pw
• 導(dǎo)入 inc

狀態(tài)：

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

位置：

• 公共 gb
• 邊框 bor
• 段落 p
• 彈出 pop
• 標(biāo)題 title,tit
• 菜單 menu
• 內(nèi)容 cont
• 導(dǎo)航 nav

問(wèn)幾個(gè)簡(jiǎn)單的問(wèn)題，可以幫助我們完成命名：

1. “什么類(lèi)型的定義？”——是個(gè)輸入框，input。
2. “類(lèi)型補(bǔ)充說(shuō)明”——如果一個(gè)詞說(shuō)明不清楚，那么補(bǔ)充說(shuō)明類(lèi)型，文本輸入框，input_tx。
3. “在哪使用？”——定義要使用的位置在哪？首頁(yè)的搜索文本輸入框，input_search_index。

可能無(wú)法覆蓋到所有的情況，但相信能解決70%~80%的命名問(wèn)題。如果結(jié)合“模塊化”相關(guān)的方法去定義，其實(shí)所需要定義的名稱(chēng)并不需要很多。如：“hint_tx”表示提示模塊的文字定義，“hit_tx_hint”表示提示里文字強(qiáng)調(diào)的定義，至于是改變顏色還是加粗，這個(gè)就看不同提示模塊的需要了。