id必须唯一且慎用,因重复时getelementbyid只返回首个元素,导致锚点跳转、aria关联等静默失效;命名须字母开头、全小写、仅含字母数字连字符,优先用class或data-*替代。

全局属性不是“可有可无的装饰”,而是 HTML 结构健壮性和可维护性的底层支撑。漏写、错写或滥用 id、class、data-*,轻则导致 JS 选不到元素、CSS 样式失效,重则让屏幕阅读器报错、SEO 抓取失败、CI 流水线校验直接拒绝合并。
为什么 id 必须唯一且慎用
浏览器不阻止重复 id,但 document.getElementById() 只返回第一个匹配项;aria-labelledby、锚点跳转(#section2)等依赖 id 的功能会静默失败。
- 命名必须以字母或下划线开头,后续只允许字母、数字、
-、_、:、.——id="user-1"合法,id="1-user"非法 - 大小写敏感:
id="Header"和id="header"是两个不同标识 - 避免语义模糊的命名:
id="box3"不如id="search-form"明确用途 - 除非必要(如锚点、ARIA 关联、模态框控制),优先用
class或data-替代id
class 命名和操作的实际约束
class 是最常被误用的全局属性:命名含样式(class="red-btn")、大小写混用(Class="Btn")、空格拼错(class="btn primary" 缺少引号)都会引发连锁问题。
- 必须全小写,单词间用短横线:
class="user-profile-card",禁止userProfileCard或user_profile_card - 禁止用视觉描述命名:改
class="float-left"为class="sidebar-nav",否则布局一变就成“谎言” - JS 操作务必用
classListAPI:element.classList.add('active'),别用element.className += ' active'—— 后者会覆盖已有类、引入多余空格 - 多个类名必须用空格分隔且包裹在一对双引号内:
class="btn btn-warning is-disabled"
data-* 属性怎么写才真正可用
data- 是前端与后端/模板引擎传递结构化数据的“安全通道”,但它不是随便加个 data-id="123" 就完事 —— 命名不规范会导致 JS 解析失败、服务端无法映射、甚至被某些 CSP 策略拦截。
- 必须全小写,用短横线连接:
data-product-sku="ABC-123",不能是data-productSku或data_ProductSku - 值必须是字符串;若需传对象/数组,请 JSON.stringify 后再赋值:
data-config='{"theme":"dark","timeout":5000}' - JS 读取统一用
dataset(自动转驼峰):element.dataset.productSku→"ABC-123",而非element.getAttribute('data-product-sku') - 避免过度使用:不要用
data-存大量状态(如整个用户信息),该走 API 的走 API,该用状态管理的用状态管理
lang、charset、role 这些“非显性”属性为什么不能省
它们不渲染 UI,但决定页面是否能被正确解析、朗读、索引。漏掉 lang,中文站点在 Safari 下可能触发错误字体回退;没写 charset="UTF-8",表单提交中文字段可能变成乱码;role 错配(如 role="button" 却没加键盘事件支持),会直接让残障用户卡死。
-
lang必须写在标签上,值为 BCP 47 标准格式:lang="zh-CN",不是lang="zh"或lang="cn" -
charset必须是<meta charset="UTF-8">,且放在最前面(早于<title></title>) -
role要严格匹配 ARIA 角色语义:<div role="navigation"> 可以,但 <code><nav role="navigation"></nav>多余且干扰辅助技术 - 所有带
aria-的属性(如aria-hidden、aria-expanded)必须有对应值,且值类型要合法(aria-expanded="true"不能写成aria-expanded="1")
真正难的不是记住每条规则,而是在写第一行 、给第一个按钮加 class="btn btn-primary"、往商品卡片加 data-product-id="456" 时,下意识就做对 —— 因为一旦出错,它不会立刻报红,而是在某个深夜的无障碍测试、某次海外用户投诉、某条 CI 报告里突然浮现。











