17370845950

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”。混淆它们，后面改起来连自己都认不出当初为什么这么写。