2 属性

2.1 属性引号

【强制】对于属性的定义使用双引号，不允许使用单引号，不允许不使用引号；

示例：

<!-- Not so great -->
<img class='avatar' src="./img/avatar.png" alt='avatar'>
<!-- Better -->
<img class="avatar" src="./img/avatar.png" alt="avatar">

2.2 属性大小写

【强制】属性名应该小写，不允许大写或大小写混合；

示例：

<!-- Not so great -->
<table cellSpacing="0">...</table>
<!-- Better -->
<table cellspacing="0">...</table>

2.3 属性布尔值

【建议】布尔类型的属性，建议不添加属性值，至少同一项目要保持一致；

示例：

<input type="text" disabled>
<input type="checkbox" checked>

2.4 属性声明顺序

【建议】HTML 属性建议尽量按照以下给出的顺序依次排列，确保代码的易读性。

• class
• id, name
• data-*
• src, for, type, href
• title, alt
• aria-*, role

class 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，应当谨慎使用（例如，页面内的书签），建议预留更多的id命名给技术，因此排在第二位。

<a class="..." id="..." data-modal="toggle" href="# ">Example link</a>
<input class="form-control" type="text">
<img src="..." alt="...">

2.5 自定义属性

【建议】使用自定义属性作为JS的hook，建议以data-为前缀；

示例：

<input data-role="getPic" type="button">

2.6 链接属性

【强制】禁止 a 标签的 href 取值为空或不写 href 属性，重构时默认可用 # 代替；

如果不需要使用链接功能，请不要使用不带 href 的 a 标签，既不符合标签的语义，也可能会产生未知的兼容性问题；

示例：

<!-- Not so great -->
<a href="" title="title">欢聚时代</a>
<a class="xxx">欢聚时代</a>
<!-- Better -->
<a href="# " title="title">欢聚时代</a>

[⬆]