class名必须全小写加短横线分隔，如user-avatar；id需统一风格且语义化，如search-form；禁用class作js钩子，应改用id或data-*属性；命名须简短但语义清晰，避免过度缩写。
class 名必须全小写 + 短横线分隔
这是最常被忽略的强制项。哪怕你只写一个单词，也不能用 sidebar 以外的形式——比如 Sidebar、sideBar、sidebar_1、sidebar1 都不符合规范。
原因很简单：class 是样式与语义的载体，不是变量名。大小写混用或数字结尾容易和 BEM、CSS-in-JS 工具链冲突；下划线在部分旧版 CSS 预处理器里可能被解析为运算符；纯数字后缀则丧失可读性。
- ✅ 正确：
user-avatar、main-nav、error-message - ❌ 错误：
UserAvatar、user_avatar、nav2、activeTab
ID 名建议用短横线，但项目内需统一风格
id 虽然没有 class 那样强的命名约束（如“必须短横线”），但所有权威规范都强调：同一项目中必须保持风格一致。如果你选了 user-profile-modal，就别在另一处写 userInfoPanel。
注意：ID 的核心职责是唯一标识，不是描述样式。所以 left-sidebar、red-button 这类以位置或颜色命名的 ID，本质违反语义原则——页面重构后位置变了，ID 就失效或误导。
- ✅ 推荐：
search-form、notification-toast、article-123（带业务标识时） - ❌ 避免：
left-nav、big-title、btn-primary（这类更适合 class）
禁止用 class 做 JS Hook，优先用 id 或 data-* 属性
很多人写 class="js-toggle-menu"，看似方便，实则埋雷：一旦设计师改样式想删这个 class，JS 就挂了；或者两个模块共用同一个 class，JS 逻辑错乱。
真正安全的做法是把行为钩子和样式解耦：
- 用
id定位唯一元素（如<div id="modal-root">）<li>用 <code>data-属性标记行为意图（如<button data-action="submit-form"></button>） - 绝对不用纯功能型 class（如
js-hide、is-active） - ✅ 清晰且简短：
nav、logo、post-meta - ❌ 过度压缩：
n、lg、pm（除非项目全局约定且文档完备） - ⚠️ 注意边界：
user-profile-section略长，但比ups明确得多；真要缩短，可考虑profile-section（上下文已知是 user 模块）
浏览器原生支持 document.querySelector('[data-action="submit-form"]')，比靠 class 更稳定、更易维护。
命名长度要短，但不能牺牲语义清晰度
缩写不是目标，可推断才是。像 com 代替 comment、hdr 代替 header，初看省字符，实际增加认知成本——尤其团队协作或半年后回看代码时。
判断标准很简单：不查文档/上下文，能否一眼看出这个 class 或 id 控制哪块内容？
真正容易被忽略的，不是“怎么起名”，而是“改名时要不要同步更新 JS/CSS 引用”。一个 id 被改了，却漏掉某处 getElementById('old-id')，这种错误不会报语法错，只会静默失效。
