首页 > 代码库 > 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样式命名规则