由于大多数,程序研究都是独立完成,所以很多时间,往往就忽略了css样式的命名规则,但随着2次开发项目的不断提升,这些东西也不得不得到了个人的重视。


    命名一直是个让我头痛的问题,特别是那些看上去差不多的模块,所以就得想办法啦,我总结了下面的方法,虽然还在试验中。希望对大家有帮助。欢迎大家提出改进的意见。具体如下:


要注意的内容:

一,命名所选用的单词应选择不过于具体表示某一状态(如颜色、字号大小等)的单词,以避免当状态改变时名称失去意义。

二,样式类名由以字母开头的小写字母(a-z)、数字(0-9)、下划线(_)、减号(-)组成。

ID名称由不以数字开头的小写字母(a-z)、数字(0-9)、下划线(_)组成。


可使用类似下面的规则:


[模块前缀|类型|作用]_[名称]_[状态|位置]

约定模块、类型、状态、位置等的所使用的单词或其缩写,保持上面的顺序,尽量保持在两到三个单词说清用途。


例:

通用名词缩写

设置 set

成功 suc

提示 hint

操作 op

密码 pw

菜单 menu

按钮 btn

文本 txt

颜色 clo

背景 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