当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS样式命名规范

CSS样式表
CSS网页布局
知道吗?H1标签同样也可以美化
CSS:用overflow代替left截取指定长度字符串
学习CSS了解单位em和px的区别
巧用CSS滤镜制作绚丽图片播放效果
PDF、ZIP、DOC链接的标注(CSS技巧)
DIV CSS制作网页时易犯的错误总结
CSS隐藏网页文字的几种常用方法
总结新手学CSS容易出现错误的内容
网站配色,CSS主色调配色方案
我们需要对CSS进行缩写的原因
从三方面加速CSS样式作用网页速度
CSS属性选择器的四种格式
CSS教程:text-indent隐藏文字出现虚线框outline
表单name与id的区别和相似之处
CSS让网页里的提交按钮变得更漂亮
小技巧:网页制作中段落缩进的方法
网页导航上用CSS标志当前页效果
CSS框架的利与弊(上)
Web标准:关于DOCTYPE

CSS样式表 中的 CSS样式命名规范


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-28   浏览: 70 ::
收藏到网摘: n/a

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

要注意的内容:
一,命名所选用的单词应选择不过于具体表示某一状态(如颜色、字号大小等)的单词,以避免当状态改变时名称失去意义。
二,样式类名由以字母开头的小写字母(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