CSS 樣式命名規(guī)則
我要評(píng)論相信大家對(duì)樣式命名都多少感到困難，特別是想起一個(gè)有意義的名，更難?；仡櫫艘幌轮皩?xiě)的《 樣式命名規(guī)則 》（不知道大家使用后有什么感想）結(jié)合這段時(shí)間使用上發(fā)現(xiàn)的一些問(wèn)題，重新整理了樣式的命名規(guī)則，希望能更實(shí)用些。
要避免當(dāng)狀態(tài)改變時(shí)名稱失去意義，最常見(jiàn)的就是用于布局的類名，如“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)的名稱應(yīng)該叫什么呢？難道“one”、“two”就不是序號(hào)？其實(shí)我們要避免遇到的情況就是當(dāng)狀態(tài)（表現(xiàn)）改變時(shí)，對(duì)應(yīng)定義的類名不會(huì)失去意義。
所謂的狀態(tài)（表現(xiàn)）改變，有幾種情況：
- HTML不變，樣式定義改變。如果命名使用了表示某一狀態(tài)的名稱，如“red“、“font14“等，必定會(huì)引起定義與命名不符的情況，對(duì)后繼的影響會(huì)造成比較大的影響。
- 樣式定義不變，HTML改變。HTML改變意味著類名可更換，也就是如果類名使用了表示某一狀態(tài)的名稱，反而更有利于修改。
- 樣式定義與HTML都改變。只需要考慮不要出現(xiàn)第一種情況的結(jié)果就可以了。
而實(shí)際情況并不是單純的某一種情況，更多的時(shí)候是混雜著出現(xiàn)的。有點(diǎn)遠(yuǎn)了，回主題。
規(guī)則
[ 模塊前綴 ] _ 類型 _ ( 作用 | 狀態(tài) ) n _ [ 位置 n ]
圖例說(shuō)明：
- ( 必選 )：必需存在。
- [ 可選 ]：可根據(jù)需要選擇。
- |：多選一。
- n：可有多個(gè)。
名詞說(shuō)明：
- 模塊前綴
- 模塊定義時(shí)使用的前綴。
- 類型
- 定義類的內(nèi)容類型。如輸入框、文本、段落等等。
- 作用
- 定義類的作用，用于對(duì)類型的補(bǔ)充。
- 狀態(tài)
- 定義類的狀態(tài)，用于對(duì)類型的補(bǔ)充。
- 位置
- 定義類所使用的位置，如首頁(yè)、導(dǎo)航等等，不排除使用左、右這樣的詞，但應(yīng)盡量避免。
- 每項(xiàng)都可有自己的一個(gè)縮寫(xiě)表，同一名稱的縮寫(xiě)盡量統(tǒng)一。
- 所選用的單詞應(yīng)選擇不過(guò)于具體表示某一狀態(tài)（如顏色、大小等）的單詞，以避免當(dāng)狀態(tài)改變時(shí)名稱失去意義。
- 由不以數(shù)字開(kāi)頭的小寫(xiě)字母（a-z）、數(shù)字（0-9）組成。
- 確保類(.class)的重用性與對(duì)象(#id)的唯一性，id避免使用保留字。
例：
模塊前綴：
- 彈出 pop
- 公共 global,gb
- 標(biāo)題 title,tit
- 提示 hint
- 菜單 menu
- 信息 info
- 預(yù)覽 pvw
- Tips tips
- 導(dǎo)航 nav
類型：
- 按鈕 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
| 中文解釋 | 命名 | 中文解釋 | 命名 |
|---|---|---|---|
| 文本輸入框 | .input_tx | 段落文本顏色 | .tx_c_p |
| 密碼輸入框 | .input_pw | 相冊(cè)彈出的設(shè)置層 | .pop_set_photo |
| 登錄密碼輸入框 | .input_pw_login | 日志設(shè)置成功提示 | .hint_suc_blogset |
| 文本顏色 | .tx_c | 公共提示 | .hint_gb |
問(wèn)幾個(gè)簡(jiǎn)單的問(wèn)題，可以幫助我們完成命名：
- “什么類型的定義？”——是個(gè)輸入框，input。
- “類型補(bǔ)充說(shuō)明”——如果一個(gè)詞說(shuō)明不清楚，那么補(bǔ)充說(shuō)明類型，文本輸入框，input_tx。
- “在哪使用？”——定義要使用的位置在哪？首頁(yè)的搜索文本輸入框，input_search_index。
可能無(wú)法覆蓋到所有的情況，但相信能解決70%~80%的命名問(wèn)題。如果結(jié)合“模塊化”相關(guān)的方法去定義，其實(shí)所需要定義的名稱并不需要很多。如：“hint_tx”表示提示模塊的文字定義，“hit_tx_hint”表示提示里文字強(qiáng)調(diào)的定義，至于是改變顏色還是加粗，這個(gè)就看不同提示模塊的需要了。
相關(guān)文章
值得收藏的CSS命名規(guī)范(規(guī)則)常用的CSS命名規(guī)則
本文是小編精心給大家收藏的CSS命名規(guī)范(規(guī)則)常用的CSS命名規(guī)則 ，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-10-19- 這篇文章是腳本之家小編給大家收藏整理的關(guān)于CSS命名規(guī)則和命名方法的一些技巧，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2018-01-24
- 下面小編就為大家?guī)?lái)一篇常用的 css 命名規(guī)則(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧，祝大家游戲愉快哦2016-08-18
- 下面小編就為大家?guī)?lái)一篇淺談css命名規(guī)則(新手必看)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-29
- 本文搜集了一些CSS語(yǔ)義化命名方式以及命名規(guī)則。如有錯(cuò)誤或不妥之處，敬請(qǐng)指出，歡迎你提出更好的建議，加插更多的命名規(guī)范。2014-11-19
CSS書(shū)寫(xiě)規(guī)范、順序和命名規(guī)則
寫(xiě)了這么久的CSS，但大部分前端er都沒(méi)有按照良好的CSS書(shū)寫(xiě)規(guī)范來(lái)寫(xiě)CSS代碼，這樣會(huì)影響代碼的閱讀體驗(yàn)，這里總結(jié)一個(gè)CSS書(shū)寫(xiě)規(guī)范、CSS書(shū)寫(xiě)順序供大家參考2014-03-06常用的CSS命名規(guī)則 web標(biāo)準(zhǔn)化設(shè)計(jì)
常用的CSS命名規(guī)則 web標(biāo)準(zhǔn)化設(shè)計(jì),讓你的css更規(guī)范。2011-01-18編寫(xiě)CSS代碼時(shí)樣式的命名規(guī)則
命名一直是個(gè)讓我頭痛的問(wèn)題，特別是那些看上去差不多的模塊，所以就得想辦法啦，我總結(jié)了下面的方法，雖然還在試驗(yàn)中。希望對(duì)大家有幫助。歡迎大家提出改進(jìn)的意見(jiàn)。2009-09-09- 遇到一個(gè)很實(shí)際的問(wèn)題：由于不想增加目錄的深度，減少磁盤尋址的時(shí)間，需要減少一些目錄層級(jí)。2009-09-09
網(wǎng)頁(yè)制作中規(guī)范使用DIV+CSS命名規(guī)則，可以改善優(yōu)化功效特別是團(tuán)隊(duì)合作時(shí)候可以提供合作制作效率，本文主要介紹了CSS的class與id常用的命名規(guī)則，感興趣的可以了解一下2021-05-18