html中所有标识符共享扁平命名空间，冲突静默失效；重复id导致getelementbyid、css、锚点、无障碍功能异常；须用bem规范、data-*前缀、自定义元素破折号前缀及全局命名空间保障契约一致性。
HTML里没有命名空间，class、id、data-*、自定义元素名、事件类型、localStorage键、全局变量——全在同一个扁平池子里打架。冲突不报错，只静默失效，上线后才暴露。
为什么重复id比想象中更危险
document.getElementById()快是真快，但前提是id唯一。一旦页面出现两个id="save-btn"，JS永远只拿到第一个；CSS规则#save-btn { display: none }在不同浏览器里可能只作用于第一个、或全部、或随机生效；锚点跳转page.html#save-btn永远停在第一个位置；屏幕阅读器会把第二个按钮当空气。
- 动态渲染（如循环列表、表单 nonce 字段）必须生成唯一值：
id="account-save-nonce-1"✅，id="nonce"❌ - 服务端模板中禁用硬编码：
<input id="hidden-field">→ 改用class="js-hidden-field" data-form-scope="account" - 别为 JS 绑定强加
id：用class="js-submit"+data-action="submit"替代id="submit-btn" - 注意保留字陷阱：
id="submit"在表单内会覆盖原生form.submit()方法；id="class"或id="for"干扰属性解析
class和id必须绑定组件上下文
泛化名class="modal"或id="header"在多团队协作中等于没命名。BEM不是格式洁癖，而是用block__element--modifier把归属、层级、状态三者锁死在字符串里。
- 根元素必须带唯一 block 名：
class="user-profile"✅，class="profile"❌ - 子元素严格双下划线：
class="user-profile__avatar"✅，class="user-profile-avatar"❌（易与其它连字符命名混淆） - 禁止样式绑架：
class="big-red-text"随主题变更即失效；class="user-profile__heading"才可持续 - 状态修饰符必须归属明确：
user-profile--loading✅，is-loading❌（无 block 上下文，多个组件共存时互相污染）
data-*属性不加前缀=裸奔
浏览器不限制data-id或data-target，但 Alpine.js、HTMX、自定义弹窗脚本都可能监听同名字段。裸写data-id="123"就像把钥匙扔在门口——没人知道它是用户 ID、SKU 还是 session token。
- 强制加业务前缀：
data-user-id="123"✅，data-id="123"❌ - 统一用 kebab-case：
data-shop-cart-item-id✅，data-shop_cart_item_id❌ - 值保持简单类型：字符串或数字即可，别塞 JSON；复杂数据改用
<script type="application/json"></script> - JS 中读取自动转驼峰：
el.dataset.userId对应data-user-id，但前提是命名本身有业务指向
自定义元素和事件必须带破折号+前缀
customElements.define("my-button", ...)合法；customElements.define("mybutton", ...)直接抛DOMException: The element name is not valid——这是 HTML 规范硬约束，不是兼容性问题。
- 注册必须在 DOM 渲染前完成；若已存在，需手动调用
customElements.upgrade() - 前缀是协作底线：
shop-product-card✅，product-card❌（两个团队都注册就撞车） - 事件类型加组件标识：
"user-profile:submit"✅，"submit"❌（避免监听器误收） - 全局变量包进命名空间：
window.UserProfile = { init(), config: {} }✅，零散挂window.init❌
真正难的不是写出合规字符串，而是意识到：HTML 的每个属性都不是孤立的标签，而是跨语言、跨团队、跨生命周期的契约接口。漏掉一个前缀、少一个破折号、多一个下划线，契约就断了——而断掉的那一刻，控制台不会报错，只会悄悄让某个按钮失灵、某个弹窗不显示、某个用户无法提交表单。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
