id与class 命名规则

2019-1-5 12:25| 作者: admin| 查看: 5683| 评论: 1|来自: 蚂蚁部落

id与class是前端最为常用的属性,使用频繁,且极为简单。

由于上述特性,可能会造成它们名称的滥用,从而导致各种各样的不便,甚至出现较为严重的问题。

下面通过简短代码介绍一下id与class属性值在开发中比较推荐的命名规则。

一.属性值内容:

属性值只能是26个英文字母、数字和连字符(-),其他字符都不要出现,包括汉字。

推荐使用英文单词,可以使用简写形式,但不要随意创造简写形式,而是使用所熟知或者早就约定俗成的形式。如果实在找不到合适的英文单词,可以使用汉语拼音替代,但是尽量少的使用,通常用于产品名称与特定词汇。

二.属性值大小写:

id与class属性值推荐小写形式,代码如下:

[HTML] 纯文本查看 复制代码
<!-- 推荐命名方式 -->
<div class="side"></div>
<!-- 不推荐命名方式 -->
<div class="Side"></div>

三.连字符的使用:

属性值是多个单词的合成时,推荐单词之间使用连字符。

当然,属性值字符串依然推荐小写形式:

[HTML] 纯文本查看 复制代码
<!-- 推荐命名方式 -->
<div class="side-bar"></div>
<!-- 不推荐命名方式 -->
<div class="side_bar"></div>

四.id属性值不能重复:

文档中的id是必须不能重复,不但规范中这么推荐,标准中也是如此硬性规定的。

虽然id属性值重复,可能不会报错,但是依然要禁止,防止出现意外情况。

五.class属性用来设置样式:

class属性要做其本职工作,那就是设置元素的样式。

而不是元素设置class属性的目的,是为了通过JavaScript相关方法获取此元素。

否则,可能会导致class属性滥用的现象,通过id或者属性选择器结合JavaScript获取元素是更为推荐。

六.属性值要体现其功能:

属性值的名称要体现其功能,尽量做到见词达意。

这对于其他开发人员阅读代码或者后期维护有着重要意义。

特别说明:属性值不能体现具体数据,而是体现功能。

[CSS] 纯文本查看 复制代码
.fw-800 {
  font-weight: 800;
}
  
.red {
  color: red;
}

上述代码并不符合规范,两个class属性值都体现了具体数据,因为数据是有可能发生改变的,假如颜色由red红色修改为blue蓝色,那么不但CSS代码中的选择器和具体的数据需要修改,HTML中的class属性值也需要修改,否则就有可能误导其他阅读代码的人员,甚至写代码的本人也会被误导,明明选择器的名称是".red",但是实际的颜色确实蓝色,发生了什么....,代码修改如下:

[CSS] 纯文本查看 复制代码
.heavy {
  font-weight: 800;
}
  
.important {
  color: red;
}

上述class属性值的命名仅体现它的功能,与具体数据无关。


鲜花

握手

雷人

路过

鸡蛋
发表评论

最新评论

引用 gwdsss 2019-8-22 14:29
属性值只能是26个英文字母、数字和连字符(-),其他字符都不要出现,包括汉字。
找不到合适的英文单词,可以使用汉语拼音替代,但是尽量少的使用,通常用于产品名称与特定词汇。
id与class属性值推荐小写形式
单词之间使用连字符。
<div class="side-bar"></div>
通过id或者属性选择器结合JavaScript获取元素是更为推荐。

这对于其他开发人员阅读代码或者后期维护有着重要意义。
特别说明:属性值不能体现具体数据,而是体现功能。

查看全部评论(1)

返回顶部