id用于唯一锚点、JS获取单元素、label关联input及高优先级CSS；class才是日常样式主力，应按BEM规范命名，避免纯样式类，多class组合更灵活可维护。
class 和 id 在语义和用途上根本不是一回事
别拿 class 和 id 当成“差不多的选一个就行”的属性。它们定位逻辑不同：id 是全局唯一标识，对应 DOM 中单个元素；class 是可复用的标签，描述元素的类型或状态。浏览器强制要求 id 值在页面内唯一，重复会导致 document.getElementById() 行为不可靠，CSS 选择器虽不报错但会破坏预期样式优先级。
什么时候必须用 id 而不是 class
只在以下场景才该用 id：
- 作为
的锚点目标，且该目标是页面中明确、不可重复的章节或功能入口 - 被 JavaScript 显式调用
document.getElementById("modal")获取单个控制对象（比如弹窗容器、表单主容器） - 关联
和—— 这里for属性值必须严格匹配id，class完全无效 - 需要 CSS 中利用高优先级覆盖时（
#header比.header优先级高），但应谨慎：这容易引发维护冲突，不如用更具体的 class 组合（如.header.is-fixed）
class 才是日常样式的主力，但命名有讲究
多数样式工作都该落在 class 上，但随便起名会迅速失控。推荐按 BEM 或类似逻辑组织：
- 基础块名用语义化名词：
class="card"、class="search-bar" - 元素用双下划线分隔：
class="card__title"、class="search-bar__input" - 修饰符用双破折号：
class="card--featured"、class="search-bar--compact" - 避免纯样式名（如
class="red-text"）——它把表现耦合进 HTML，改色就得改结构 - 多个 class 允许共存：
class="btn btn--primary btn--large"，比写一堆 ID 更灵活、更易组合
选择器性能和可维护性的真实影响
CSS 选择器性能差异在现代浏览器里已微乎其微，真正拖慢开发的是可读性和可预测性：
-
#nav li a看似精准，但一旦导航结构变（比如li改成div），整条规则失效 -
.nav-link简单直接，HTML 怎么重构都不影响样式生效 - 嵌套过深的选择器（如
.sidebar .content .item .title）会让调试变得困难，也提高未来覆盖样式的成本 - 用
[data-*]属性做状态标记（如data-state="loading"）比依赖 class 切换更清晰，尤其适合 JS 控制的临时状态
.card {
border: 1px solid #ddd;
}
.card__title {
font-size: 1.2em;
margin: 0;
}
.card--featured {
border-color: #007bff;
}
.card--featured .card__title {
color: #007bff;
}
ID 不是“高级 class”，class 也不是“退而求其次的 ID”。混淆它们，后面改起来连自己都认不出当初为什么这么写。
border-color: #007bff;
}
.card--featured .card__title {
color: #007bff;
}
