CSS样式命名规范

2016-02-19 23:48 2 1 收藏

今天图老师小编要跟大家分享CSS样式命名规范,精心挑选的过程简单易学,喜欢的朋友一起来学习吧!

【 tulaoshi.com - Web开发 】

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

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

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

可使用类似下面的规则:

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

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

例:
通用名词缩写
设置 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

来源:https://www.tulaoshi.com/n/20160219/1630650.html

延伸阅读
标签: Web开发
命名一直是个让我头痛的问题,特别是那些看上去差不多的模块,所以就得想办法啦,我总结了下面的方法,虽然还在试验中。希望对大家有帮助。欢迎大家提出改进的意见。具体如下: 要注意的内容: 一,命名所选用的单词应选择不过于具体表示某一状态(如颜色、字号大小等)的单词,以避免当状态改变时名称失去意义。 二,样式类名由以字母开头...
标签: Web开发
命名一直是个让我头痛的问题,特别是那些看上去差不多的模块,所以就得想办法啦,我总结了下面的方法,虽然还在试验中。希望对大家有帮助。欢迎大家提出改进的意见。具体如下: 要注意的内容: 一,命名所选用的单词应选择不过于具体表示某一状态(如颜色、字号大小等)的单词,以避免当状态改变时名称失去意义。 二,样式类名由以字母开头的...
      Web开发人员可以通过创建CSS类及id名称并使用这些名称来对divs以及其他的格式页面元素进行标识。对开发人员来说,在命名重新定义XHTML标记(tags)的CSS selectors时,必须保证其与预定义的标记准确匹配,但就类以及id选择器名称而言,则仁者见仁,智者见智。然而随心所欲的为这些类以及id命名则并不是个好的习惯。...
标签: Web开发
每个人都可以编写CSS代码,甚至你现在已经让它为你的项目工作了。但是CSS还可以更好吗?虽然webjx.com介绍了多种这方面的技巧,得开始用这五个方面改进你的CSS,会让你显得更加专业,也能使代码有好! 一、重置 首先,很认真的告诉你,总是要重置某些分类。无论你是使用 Eric Meyer Reset、YUI Reset,或者你自己编写的重置代码,...
标签: Web开发
规范的命名也是Web标准中的重要一项,标准的命名可以更好的看懂代码,我想大家应该都有这种经历,某日翻出自己过去写的代码居然看不懂了,呵呵,为了避免这种情况我们就要规范化命名,再说了,现在一个项目不是一个人就可以完成的,是需要大家互相合作的,如果没有规范化命名,别人就无法看懂你的代码,大大降低了工作效率,所以必须规范化...

经验教程

257

收藏

90

精华推荐

规范Web站点设计css类以及id的命名方式

规范Web站点设计css类以及id的命名方式

ido皆有可能

CSS教程:文件命名规则

CSS教程:文件命名规则

夏末如初恋一人

CSS常用命名参考

CSS常用命名参考

xingko_com_cn

微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部