class和id不能叫left、red-btn或div1，因其暴露样式或结构细节，改版后失效；JS查询和可访问性支持随之崩溃；应采用语义化命名如search-submit、user-profile__avatar，并确保id全局唯一、kebab-case格式、带业务前缀。
class 和 id 为什么不能叫 left、red-btn 或 div1
这类名字直接暴露样式或结构细节，一改就废。red-btn 在主题切换后变成橙色，left 可能被 flex 布局取代，div1 根本看不出语义。更严重的是，它让 JS 查询和可访问性支持失效——document.getElementById("div1") 拿到的可能是任意一个“第一个 div”，屏幕阅读器也读不出内容角色。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用功能/内容命名：
search-submit、user-profile__avatar、error-message - id 必须全局唯一且稳定：
id="contact-form"✅，id="btn1"❌ - 禁止纯数字、拼音、大写或下划线：
user_profile、UserProfile、div2全部违规 - BEM 不是必须套双下划线，但 block 名必须唯一：
class="user-profile"是底线，class="profile"就等于没隔离
data-* 属性怎么命名才不和其他库打架
浏览器不限制 data-toggle 或 data-target，但 Alpine.js、HTMX、自定义弹窗脚本全可能监听同名属性。裸写 data-id="123" 等于把钥匙扔在门口——三个月后没人知道它是用户 ID 还是订单号，也没人知道谁在读它。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 强制加业务前缀：
data-user-id="123"、data-shop-cart-item-id="456" - kebab-case 是唯一安全格式：
data-abc-user-id✅，data-abc_user_id❌ - 值保持简单类型：字符串或数字即可，别塞 JSON；复杂数据改用
<script type="application/json"> - 禁用敏感信息：
data-user-token这种写法等于把 token 明文贴在 HTML 里
自定义元素名为什么注册就报 DOMException: The element name is not valid
这不是兼容性问题，是 HTML 规范硬性要求：customElements.define() 的第一个参数必须含至少一个破折号（-）。没破折号，浏览器直接拒绝注册，连降级逻辑都没有。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 合法名：
my-button、shop-product-card、abc-modal - 非法名：
mybutton、MyButton、my_button、tabs - 注册时机必须早于 DOM 渲染：在
<my-button>出现在页面前调用define()；否则得手动customElements.upgrade() - 前缀不是语法要求，但它是协作底线：
shop-、abc-这类统一前缀能避免团队间撞名
为什么 localStorage.setItem("theme", "dark") 上线就出问题
localStorage 是纯全局键值对空间，没有任何作用域。你写 setItem("theme", "dark")，第三方统计 SDK 或另一个组件也写同名 key，结果就是互相覆盖。这不是“可能冲突”，而是部署即现。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有 key 强制拼接前缀：
const STORAGE_PREFIX = "myapp_v3_user-profile_"; - 封装读写工具函数，调用时只传逻辑键名：
storage.set("last-viewed", "2026-05-01")内部自动补前缀 - 拒绝单 key 存对象：
setItem("user-state", JSON.stringify({...}))会导致更新字段时重写整个字符串，竞态风险高 - 别信“别人不会乱写”——用 prefix 是唯一低成本防御手段
真正容易被忽略的，是 class/id、data-*、localStorage、CustomEvent、全局变量这五类命名，表面看互不相干，实际共享同一套全局扁平命名空间。只要其中一类漏掉前缀或语义退化，隔离边界就从根上垮掉。
