class 用于样式复用和批量操作，id 仅用于唯一元素定位与 js 交互；css 必须用 class 绑定，禁用 id 写样式；id 仅限 label for、js 显式调用、页面锚点三类场景；命名统一小写连字符，避免冲突与维护风险。
class 和 id 不是“都能用”的替代关系，而是分工明确的绑定机制：class 用于样式复用和批量操作，id 仅用于唯一元素定位与 JS 交互——混用或滥用会直接导致样式覆盖失控、JS 选择器失效、可维护性崩塌。
class 必须用于所有 CSS 样式绑定
无论元素是否唯一，只要涉及视觉呈现（颜色、间距、布局、动画等），一律用 class，禁止用 id 写 CSS 规则。原因很实际：
-
id选择器优先级过高（高于 class），一旦写成#header { margin: 0 }，后续想通过.section-title调整某个标题外边距，就得加#header .section-title才能覆盖，越写越深、越改越脆 -
class可重复、可叠加，比如class="btn btn-primary btn-sm"，而id强制唯一，无法组合语义 - 团队协作中，CSS 开发者不关心“这个 div 是不是页面唯一”，只关心“它该长什么样”，
class天然匹配这种思维
id 只在三种场景下合法使用
id 不是“高级 class”，它的存在有严格边界：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 作为
<label for="xxx"></label>的目标锚点，for属性必须匹配input的id，不能用name或class - 被 JavaScript 显式调用，例如
document.getElementById("modal-overlay")或$("form#login-form")，且该元素在整个页面中确实唯一 - 作为页面内跳转锚点，如
@#@#@#@#@#@#@#@#@#@0对应<div id="faq"> <p>其他任何情况——比如“给导航栏加个 id=nav”再用 CSS 写 <code>#nav { display: flex }——都属于误用，应立刻改为class="nav"。命名冲突与大小写敏感的实际影响
HTML 中
id和class均区分大小写，但浏览器容错性强，容易掩盖问题：-
class="Button"和class="button"是两个不同类，在 CSS 里写.button { ... }就不会命中前者 -
id="MyForm"在 JS 中用getElementById("myform")返回null（IE 早期版本甚至曾不区分，但现代标准必须严格） - 推荐统一小写 + 连字符（kebab-case）：
class="user-profile-card"、id="search-input-field"，避免下划线（部分旧 CSS 解析器不兼容）、驼峰（易与 JS 变量混淆）
class 与 id 同时存在时的 DOM 操作风险
当一个元素同时带
id和class（如<div id="sidebar" class="widget sidebar-ad">），需特别注意： <ul> <li>CSS 中 <code>#sidebar和.sidebar-ad若设置冲突属性（如width），#sidebar会胜出——这不是 bug，是优先级规则，但容易让人误以为 “class 没生效” -
- jQuery 里
$("#sidebar")和$(".sidebar-ad")返回结果可能不同：前者只匹配一个，后者匹配所有含该 class 的元素，若误用会导致事件绑定漏掉或重复 - Vue/React 等框架中，
ref或id绑定若与已有id冲突，可能引发 SSR hydration 失败或焦点管理异常
真正难处理的从来不是语法，而是当 id 被当成“高权重 class”随意塞进模板、又没人清理历史 CSS 时，那个突然不生效的 margin ——它往往藏在你没打开的 base.css 里，用一条 #app-header { margin: 0 !important } 默默接管了整个页面。
