前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >样式命名规则

样式命名规则

作者头像
GhostZhang
发布2022-08-21 10:25:51
8790
发布2022-08-21 10:25:51
举报
文章被收录于专栏:CSS森林CSS森林

样式命名规则

Ghostzhang 发表于 2008-03-20 23:12

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

要注意的内容:

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

二,样式类名由以字母开头的小写字母(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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2008-03-20 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 样式命名规则
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档