<p>class 必须排在所有属性最前面，因其是复用性最高的结构标识，影响 CSS 匹配、JS 查询、BEM 推断及样式优先级；id 和 name 紧随其后，data- 属性靠后；src/href/for/type 等资源关联属性居中；alt/title/aria- 等可访问性属性放末尾但不可省略。</p>
class 必须排在所有属性最前面
因为 class 是复用性最高的结构标识，直接影响 CSS 选择器匹配效率、JS 查询（如 getElementsByClassName）、BEM 命名推断，以及样式层叠的起始优先级。把它放第一位，一眼就能识别组件类型，而不是被某个具体 id 或临时 data-id="123" 干扰判断。
常见错误是把 id 或 data-test 放最前，结果扫一眼先看到实例 ID，反而掩盖了它属于哪个通用模块——比如 <div id="user-card-5" class="card user-card">，不如写成 <code><div class="card user-card" id="user-card-5"> 直观。<h3>id 和 name 紧跟 class 后，data-* 属性再往后</h3>
<p><code>id 是页面内唯一锚点，语义上比 class 更“具体”，所以排第二；name 主要用于表单提交和 JS 表单控制，属于行为层，优先级低于结构标识；data-* 是自定义数据，完全由 JS 驱动，理应靠后。
注意：data- 属性名必须全小写，且中间不能有大写字母（data-userId ❌，应为 data-user-id）；值必须用双引号包裹，哪怕只是数字或布尔字符串。
立即学习“前端免费学习笔记（深入）”；
-
<button class="btn" id="submit-btn" name="action" data-action="save" type="submit"></button>✅ -
<button data-action="save" class="btn" id="submit-btn"></button>❌（顺序错，且data-action位置干扰结构识别）
src、href、for、type 这类资源/关联属性放中间
它们依赖 DOM 结构已存在才能生效：浏览器解析到 src 才会发起图片请求，遇到 href 才可能预加载链接目标，for 要等对应 id 元素存在才绑定成功。所以不能抢在结构标识之前。
典型场景包括：img 的 src 和 alt、link 的 href 和 rel、label 的 for、input 的 type 和 required。
布尔属性如 disabled、required 不要写值：required="true" 或 disabled="disabled" 是冗余写法，W3C 验证器会警告，某些框架（如 Vue SSR）还可能因此解析异常。
alt、title、aria-* 放末尾但不可省略
可访问性属性不参与布局或渲染流程，属于“附加信息层”，放太靠前会打断对核心结构的快速扫描。但它们绝不能缺失：
-
img必须带alt，哪怕为空（alt=""），表示图像纯装饰；省略则 W3C 验证失败，屏幕阅读器无法描述，SEO 权重受损 -
a或button包含图标无文字时，必须用aria-label补充说明，title不是无障碍替代方案（移动端基本无效） -
role和其他aria-*建议统一放在最后，避免打断语义流
最容易被忽略的是：空 alt="" 和缺失 alt 是两回事——前者合规，后者直接导致验证失败和可访问性断层。
