CSS教程:编写CSS代码时样式命名的规则

微山又一家中介

微山又一家中介

2016-02-20 00:13

今天图老师小编给大家展示的是CSS教程:编写CSS代码时样式命名的规则,精心挑选的内容希望大家多多支持、多多分享,喜欢就赶紧get哦!

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

要注意的内容:
一,命名所选用的单词应选择不过于具体表示某一状态(如颜色、字号大小等)的单词,以避免当状态改变时名称失去意义。
二,样式类名由以字母开头的小写字母(a-z)、数字(0-9)、下划线(_)、减号(-)组成。
ID名称由不以数字开头的小写字母(a-z)、数字(0-9)、下划线(_)组成。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

可使用类似下面的规则:

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

例:
通用名词缩写
设置 set
成功 suc
提示 hint
操作 op
密码 pw
菜单 menu
按钮 bt
文本 tx
颜色 c
背景 bg
边框 bor
居中 center
图标 icon
弹出 pop

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

文本输入框 .input_tx
密码输入框 .input_pw
登录密码输入框 .input_pw_login
日志设置成功提示 .hint_suc_blogset
相册弹出的设置层 .pop_set_photo
公共提示 .hint_bg
文本颜色 .c_tx
段落文本颜色 .c_tx_p

展开更多 50%)
分享

猜你喜欢

CSS教程:编写CSS代码时样式命名的规则

Web开发
CSS教程:编写CSS代码时样式命名的规则

编写CSS代码时样式命名的规则

Web开发
编写CSS代码时样式命名的规则

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS样式命名规则

Web开发
CSS样式命名规则

CSS样式命名规则及参考命名标准

Web开发
CSS样式命名规则及参考命名标准

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

CSS教程:文件命名规则

Web开发
CSS教程:文件命名规则

CSS样式命名规范

Web开发
CSS样式命名规范

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Windows8备份系统图文教程

Windows8备份系统图文教程

使用CSS Sprite的一些最佳实践

使用CSS Sprite的一些最佳实践
下拉加载更多内容 ↓