id与class 命名规则

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属性值的命名仅表现它的性能，与详细数据有关。