HTML class 和 id 命名须遵循语义优先原则：class 应描述内容或功能（如 article-title），禁用样式化命名；id 仅用于唯一锚点或 JS 绑定，须全局唯一；统一使用 kebab-case，禁用数字、空格、中文开头。
HTML 的 class 和 id 不是随便起个名字就行，命名混乱会直接导致 CSS 写不下去、JS 找不到元素、团队协作时互相猜半天——核心原则就一条：语义优先，结构次之，样式靠后。
class 命名必须反映内容或功能，不能描述样式
很多人写 class="red-text" 或 class="float-left"，这类命名在换主题、改布局时立刻失效。CSS 类名不是“样式快照”，而是“这个东西是什么/干什么”。
- ✅ 推荐：
class="article-title"、class="user-avatar"、class="search-submit"—— 描述组件角色 - ❌ 避免：
class="big-blue"、class="clear-fix"（除非是全局通用工具类，且明确约定为u-clear这类前缀） - 工具类如
u-hidden、u-text-center可以存在，但需统一前缀（如u-或util-），且只用于纯功能性、无语义的辅助行为 - 嵌套组件用 BEM 风格更稳：
class="card"→class="card__header"→class="card__header--highlighted"，双下划线表从属，双短横表状态
id 只用于唯一锚点或 JS 强绑定，别当 class 用
id 在整个页面中必须唯一，浏览器和辅助技术都依赖这点。它不是“带样式的 class”，也不该用来批量选中元素。
- ✅ 合理场景：
id="main-content"（供跳转锚点）、id="modal-confirmation"（JS 精确控制单个弹窗）、id="form-contact"（关联） - ❌ 错误用法：
id="btn-primary"（多个按钮都这么写？报错或 JS 只找到第一个）、id="sidebar"（如果页面出现两个侧边栏就崩了） - JS 中用
document.getElementById()时，若id含特殊字符（如点、冒号），必须转义：getElementById("user.email")要写成getElementById("user\.email")—— 直接写会当 CSS 选择器解析 - 服务端渲染或 SSR 场景下，动态生成的
id（如id="item-{{id}}"）务必确保值全局唯一，否则 React/Vue 的 hydration 会出错
连字符是唯一可接受的分隔符，别用驼峰或下划线
HTML 属性值不区分大小写，但 class 和 id 在 CSS 和 JS 中常被当作字符串处理。驼峰（userAvatar）易与 JS 变量混淆；下划线（user_avatar）在旧版 IE 中有兼容问题（虽已少见，但遗留系统仍可能踩坑）。
- ✅ 统一用 kebab-case：
class="nav-main"、id="footer-copyright" - ❌ 不要混用：
class="navMain"、class="nav_main"、class="navMainItem" - CSS 中写选择器时，
.nav-main是标准写法；若用了下划线，.nav_main虽能生效，但和 BEM 规范冲突，也容易和 Python/PHP 变量风格混淆 - 构建工具（如 PostCSS）或 CSS-in-JS 方案对下划线支持不一，连字符最稳妥
避免纯数字、空格、中文或特殊符号开头
id 和 class 是 HTML 属性值，但背后牵扯到 CSS 选择器语法和 JS 的 querySelector 行为。开头字符不对，轻则选择器失效，重则 JS 报错。
- ❌ 绝对禁止：
class="1column"（CSS 中.1column是非法选择器）、id="用户列表"（URL 编码后乱码，JS 字符串处理麻烦）、class="my class"（空格被解析为两个 class） - ✅ 安全写法：
class="col-1"（加字母前缀）、id="user-list"（全英文短横）、class="icon-arrow-down"（动词+名词，清晰表达意图） - 国际化项目里，别把 locale 直接塞进 class 名（如
class="btn-zh"），应通过lang属性或 data 属性控制： - 自动化生成 class（如 CSS Modules）会加哈希，那是另一套体系；手写时就老老实实按语义 + 短横来
真正难的不是记住规则，而是在写第 5 个弹窗、第 12 个卡片组件时，还能忍住不写 class="box2" 或 id="div3"——这种命名一旦进 Git 历史，后面所有人修 bug 都得先破译密码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
