編寫CSS代碼時樣式的命名規(guī)則
發(fā)布時間:2009-09-09 00:13:53 作者:佚名
我要評論

命名一直是個讓我頭痛的問題,特別是那些看上去差不多的模塊,所以就得想辦法啦,我總結(jié)了下面的方法,雖然還在試驗中。希望對大家有幫助。歡迎大家提出改進的意見。
具體如下:
要注意的內(nèi)容:
一,命名所選用的單詞應(yīng)選擇不過于具體表示某一狀態(tài)(如顏色、字號大小等)的單詞,以避免當(dāng)狀態(tài)改變時名稱失去意義。
二,樣式類名由以字母開頭的小寫字母(a-z)、數(shù)字(0-9)、下劃線(_)、減號(-)組成。
ID名稱由不以數(shù)字開頭的小寫字母(a-z)、數(shù)字(0-9)、下劃線(_)組成。
可使用類似下面的規(guī)則:
[模塊前綴|類型|作用]_[名稱]_[狀態(tài)|位置]
約定模塊、類型、狀態(tài)、位置等的所使用的單詞或其縮寫,保持上面的順序,盡量保持在兩到三個單詞說清用途。
例:
通用名詞縮寫
設(shè)置 set
成功 suc
提示 hint
操作 op
密碼 pw
菜單 menu
按鈕 bt
文本 tx
顏色 c
背景 bg
邊框 bor
居中 center
圖標(biāo) icon
彈出 pop
文本輸入框 .input_tx
密碼輸入框 .input_pw
登錄密碼輸入框 .input_pw_login
日志設(shè)置成功提示 .hint_suc_blogset
相冊彈出的設(shè)置層 .pop_set_photo
公共提示 .hint_bg
文本顏色 .c_tx
段落文本顏色 .c_tx_p
要注意的內(nèi)容:
一,命名所選用的單詞應(yīng)選擇不過于具體表示某一狀態(tài)(如顏色、字號大小等)的單詞,以避免當(dāng)狀態(tài)改變時名稱失去意義。
二,樣式類名由以字母開頭的小寫字母(a-z)、數(shù)字(0-9)、下劃線(_)、減號(-)組成。
ID名稱由不以數(shù)字開頭的小寫字母(a-z)、數(shù)字(0-9)、下劃線(_)組成。
可使用類似下面的規(guī)則:
[模塊前綴|類型|作用]_[名稱]_[狀態(tài)|位置]
約定模塊、類型、狀態(tài)、位置等的所使用的單詞或其縮寫,保持上面的順序,盡量保持在兩到三個單詞說清用途。
例:
通用名詞縮寫
設(shè)置 set
成功 suc
提示 hint
操作 op
密碼 pw
菜單 menu
按鈕 bt
文本 tx
顏色 c
背景 bg
邊框 bor
居中 center
圖標(biāo) icon
彈出 pop
文本輸入框 .input_tx
密碼輸入框 .input_pw
登錄密碼輸入框 .input_pw_login
日志設(shè)置成功提示 .hint_suc_blogset
相冊彈出的設(shè)置層 .pop_set_photo
公共提示 .hint_bg
文本顏色 .c_tx
段落文本顏色 .c_tx_p
相關(guān)文章
值得收藏的CSS命名規(guī)范(規(guī)則)常用的CSS命名規(guī)則
本文是小編精心給大家收藏的CSS命名規(guī)范(規(guī)則)常用的CSS命名規(guī)則 ,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧2018-10-19- 這篇文章是腳本之家小編給大家收藏整理的關(guān)于CSS命名規(guī)則和命名方法的一些技巧,非常不錯,具有參考借鑒價值,需要的朋友參考下吧2018-01-24
- 下面小編就為大家?guī)硪黄S玫?css 命名規(guī)則(推薦)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧,祝大家游戲愉快哦2016-08-18
- 下面小編就為大家?guī)硪黄獪\談css命名規(guī)則(新手必看)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-06-29
- 本文搜集了一些CSS語義化命名方式以及命名規(guī)則。如有錯誤或不妥之處,敬請指出,歡迎你提出更好的建議,加插更多的命名規(guī)范。2014-11-19
- 寫了這么久的CSS,但大部分前端er都沒有按照良好的CSS書寫規(guī)范來寫CSS代碼,這樣會影響代碼的閱讀體驗,這里總結(jié)一個CSS書寫規(guī)范、CSS書寫順序供大家參考2014-03-06
常用的CSS命名規(guī)則 web標(biāo)準(zhǔn)化設(shè)計
常用的CSS命名規(guī)則 web標(biāo)準(zhǔn)化設(shè)計,讓你的css更規(guī)范。2011-01-18- 相信大家對樣式命名都多少感到困難,特別是想起一個有意義的名,更難?;仡櫫艘幌轮皩懙摹?樣式命名規(guī)則 》(不知道大家使用后有什么感想)結(jié)合這段時間使用上發(fā)現(xiàn)的一些2009-09-09
- 遇到一個很實際的問題:由于不想增加目錄的深度,減少磁盤尋址的時間,需要減少一些目錄層級。2009-09-09
- 網(wǎng)頁制作中規(guī)范使用DIV+CSS命名規(guī)則,可以改善優(yōu)化功效特別是團隊合作時候可以提供合作制作效率,本文主要介紹了CSS的class與id常用的命名規(guī)則,感興趣的可以了解一下2021-05-18