CSS 样式命名规则

2020-05-11 18:24:02易采站长站整理

段落 p
图标 icon
input input
颜色 color,c
背景 bg
边框 bor

作用:

设置 set
添加 add
删除 del
操作 op
密码 pw
导入 inc

状态:

成功 suc
失败 lost
透明 tran

位置:

公共 gb
边框 bor
段落 p
弹出 pop
标题 title,tit
菜单 menu
内容 cont
导航 nav

中文解释命名中文解释命名
文本输入框.input_tx段落文本颜色.tx_c_p
密码输入框.input_pw相册弹出的设置层.pop_set_photo
登录密码输入框.input_pw_login日志设置成功提示 .hint_suc_blogset
文本颜色.tx_c公共提示 .hint_gb

问几个简单的问题,可以帮助我们完成命名:

“什么类型的定义?”——是个输入框,input。
“类型补充说明”——如果一个词说明不清楚,那么补充说明类型,文本输入框,input_tx。
“在哪使用?”——定义要使用的位置在哪?首页的搜索文本输入框,input_search_index。

可能无法覆盖到所有的情况,但相信能解决70%~80%的命名问题。如果结合“模块化”相关的方法去定义,其实所需要定义的名称并不需要很多。如:“hint_tx”表示提示模块的文字定义,“hit_tx_hint”表示提示里文字强调的定义,至于是改变颜色还是加粗,这个就看不同提示模块的需要了。