id仅用于唯一标识元素，如锚点、js获取、label配对；class承担95%样式任务，应语义化命名（如bem）、多类协同、避免纯样式名。
类选择器（class）和 ID 属性（id）不是“选一个就行”的替代关系，而是分工明确、各司其职。规划得当，能显著降低样式冲突、JS 逻辑错乱和后续重构成本。
明确 id 的使用边界：只在必须唯一时才用
id 不是“给元素起个名字”，而是页面中该元素的唯一身份证。滥用会导致 JS 获取错位、CSS 行为不可靠、可访问性失效。以下场景才该用 id：
- 作为页面内锚点目标，如
@#@#@#@#@#@#@#@#@#@0对应<section id="contact"></section> - 被 JavaScript 显式调用，例如
document.getElementById("modal-root")控制弹窗容器 - 与
<label for="email"></label>配对的<input id="email">——for只认id，class完全无效 - 极少数需高优先级 CSS 覆盖时（如第三方库样式难改），但优先考虑用更具体 class 组合（如
.header.is-sticky）代替
class 是样式主力：按语义+结构命名，拒绝纯样式类
95% 的样式控制应落在 class 上。关键不在“能不能用”，而在“怎么起名”。推荐采用 BEM 或类似逻辑：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
块（Block）：用语义化名词，如
class="product-card"、class="nav-menu" -
元素（Element）：双下划线分隔，表示块的组成部分，如
product-card__title、nav-menu__item -
修饰符（Modifier）：双破折号表示状态或变体，如
product-card--featured、nav-menu--horizontal - 避免
class="red-text"、class="float-left"这类纯样式名——改设计就得改 HTML，破坏关注点分离
多 class 协同，不依赖嵌套选择器
一个元素可以同时拥有多个 class，这是提升灵活性和可维护性的核心手段：
- 按钮可写成：
<button class="btn btn--primary btn--large"></button>，每个 class 各司其职 - 比写
#user-form .submit-btn:hover更可靠：HTML 结构微调（比如换了个父容器）不会让样式突然失效 - 避免深层嵌套如
.sidebar .content .list .item a：调试困难，覆盖成本高，且易被无意破坏 - 临时状态建议用
data-属性，如data-loading="true"，比切换 class 更语义清晰
ID 必须全局唯一：动态场景要防重复
重复 id 看似无感，实则埋雷。尤其在循环渲染、组件复用、服务端模板中极易发生：
- 列表项不能写死
id="delete-btn"，应拼接唯一标识：id="delete-btn-{{userId}}"或id="item-123" - id 值只允许字母、数字、连字符
-、下划线_；禁用点号.、冒号:、空格等（id="user.name"会让 CSS 误解析为「id=user 且 class=name」） - 不区分大小写：
id="Header"和id="header"视为同一 ID，不要混用 - id 和
name用途不同：name用于表单提交字段名，id用于 DOM 定位，二者不应随意互换
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
