命名需语义优先、结构清晰、样式解耦：class描述功能或内容（如search-submit），禁用样式名（如red-btn）；ID必须全局唯一，仅用于锚点或JS精确控制（如modal-confirmation）；统一用kebab-case；BEM规范避免过度嵌套；JS操作class须用classList API。
ID 和 class 不是随便起个名字就能用的，命名错一步，后续写 CSS、JS、协作、维护全跟着受累。核心就一条：语义优先，结构清晰，样式解耦。
class 名必须描述功能或内容，不能写样式
很多人写 class="red-btn" 或 class="float-right"，上线前看着没问题，换主题或改布局时立刻崩——CSS 里改了颜色，HTML 里还得全局搜替换；JS 里判断 el.classList.contains('float-right')，结果这个“右浮动”逻辑早被抽成 Flex 布局了。
- ✅ 推荐：
class="search-submit"、class="user-avatar"、class="error-message"——别人一眼看懂它“是什么” - ❌ 避免：
class="big-blue"、class="clear-fix"（除非是明确约定的工具类，如u-clear） - 工具类要隔离：统一前缀（如
u-hidden、u-text-center），且只用于纯功能性行为，不参与业务语义
ID 必须全局唯一，且只用于锚点或 JS 精确控制
id 不是带样式的 class。浏览器、辅助技术、React/Vue 的 hydration 都依赖它的唯一性。写两个 id="submit-btn"，JS 调用 document.getElementById('submit-btn') 只会返回第一个，剩下的全失效。
- ✅ 合理场景：
id="main-content"（供#main-content锚点跳转）、id="modal-confirmation"（JS 控制单个弹窗）、id="form-contact"（关联<label for="form-contact"></label>） - ❌ 错误用法：
id="btn-primary"（按钮可能多个）、id="sidebar"（双侧边栏就冲突） - 特殊字符要转义：
id="user.email"在 JS 中必须写成getElementById("user\.email")，否则会被当 CSS 选择器解析
统一用 kebab-case，禁用驼峰和下划线
HTML 属性值本身不区分大小写，但 class 和 id 在 CSS 选择器和 JS 字符串操作中就是普通字符串。驼峰（userAvatar）易和 JS 变量混淆；下划线（user_avatar）在旧版 IE 中有兼容隐患，且和伪类（如 :hover）视觉上难区分。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
class="nav-main"、id="footer-copyright"、class="card__header--highlighted"（BEM 中双下划线/双短横是约定，不是分隔符） - ❌ 混用：
class="navMain"、class="nav_main"、class="NavMainItem" - BEM 不是银弹，但结构要有：
card（块）、card__title（元素）、card--loading（状态）——避免card__title__link这种过度嵌套
JS 操作 class 时别直接赋值 className
el.className = 'active' 会覆盖所有已有 class，把 user-item、is-collapsed 全清掉；el.classList.add('active') 却不清理旧状态，class 列表越堆越多。
- ✅ 用
classListAPI：add()、remove()、toggle()、contains() - 切换状态优先用
replace()：el.classList.replace('idle', 'loading')，比先remove再add更安全 - 批量添加别链式调用：
el.classList.add('a').add('b')在 IE 中报错；改用el.classList.add('a', 'b')或展开数组
最常被忽略的一点：服务端渲染或动态生成 ID（如 id="item-{{id}}"）时，必须确保值在整页内唯一。React/Vue hydration 出错往往就卡在这儿，而不是逻辑或数据问题。
