css樣式命名規范的方法介紹

大家知道css樣式命名規范的方法嗎?下面我們就給大家詳細介紹一下吧!我們積累了一些經驗，在此拿出來與大家分享下，請大家互相指正。

命名一直是個讓我頭痛的問題，特別是那些看上去差不多的模塊，所以就得想辦法啦，我總結了下面的方法，雖然還在試驗中。希望對大家有幫助。歡迎大家提出改進的意見。具體如下：

要注意的內容：

一，命名所選用的單詞應選擇不過於具體表示某一狀態(如顏色、字號大小等)的單詞，以避免當狀態改變時名稱失去意義。

二，樣式類名由以字母開頭的小寫字母(a-z)、數字(0-9)、下劃線(_)、減號(-)組成。

ID名稱由不以數字開頭的小寫字母(a-z)、數字(0-9)、下劃線(_)組成。

可使用類似下面的規則:

[模塊前綴|類型|作用]_[名稱]_[狀態|位置]

約定模塊、類型、狀態、位置等的所使用的單詞或其縮寫，保持上面的順序，盡量保持在兩到三個單詞說清用途。

例：

通用名詞縮寫

設置 set

成功 suc

提示 hint

操作 op

密碼 pw

菜單 menu

按鈕 bt

文本 tx

顏色 c

背景 bg

邊框 bor

居中 center

圖標 icon

彈出 pop

文本輸入框 .input_tx

密碼輸入框 .input_pw

登錄密碼輸入框 .input_pw_login

日志設置成功提示 .hint_suc_blogset

相冊彈出的設置層 .pop_set_photo

公共提示 .hint_bg

文本顏色 .c_tx

段落文本顏色 .c_tx_p

相信大家已經學會css樣式命名規范的方法了吧!感謝大家對我們網站的支持!

相關推薦：

divcss類選擇符怎麼使用呢