现代前端架构中，#id选择器不该出现在css文件里，因其权重100远超类选择器10，导致样式覆盖困难、主题切换失效、组件隔离破坏及团队协作受阻；id应仅用于锚点、aria关联和表单可访问性，样式与js钩子统一交由class或data属性控制。
现代前端架构中，#id 选择器不该出现在 CSS 文件里——不是不能写，而是它会立刻破坏样式复用、主题切换、组件隔离和团队协作这四条基本底线。
为什么 #header 会让 .btn--primary 失效？
CSS 权重是硬性计分：一个 #id 是 100 分，一个 .class 是 10 分。哪怕你写十个类，也压不过一个 ID。浏览器不看“谁更合理”，只按数字算：#header .nav-link（110 分）天然碾压 .nav-link--active（10 分）或 .theme-dark .nav-link（20 分）。
常见错误现象：
- 写了
#nav { color: blue; }，后续加暗色模式时.theme-dark #nav才能覆盖，但这个写法又把权重拉到 200，下个需求只能继续堆 - DevTools 显示样式“已应用”，实际没渲染——因为上层某个
#layout规则悄悄覆盖了 - 用
!important临时压过，上线后忘了删，别人再加#form .btn就得加更狠的!important
组件化场景下，id="modal" 为什么必然出问题？
React/Vue 组件可能被同一页面渲染多次，但 HTML 规范要求 id 全局唯一。重复 id="modal" 会导致：
- CSS 只作用于第一个匹配元素，其余弹窗样式丢失
-
document.getElementById('modal')永远只返回第一个，JS 逻辑直接中断 - 服务端渲染（SSR）时 hydration 失败，React/Vue 控制台报错
- 测试脚本里靠
getElementById查元素，CI 环境常因 DOM 动态变化而失败
实操建议：保留 id 仅用于锚点或 ARIA 关联（如 aria-labelledby="tooltip-1"），样式和 JS 钩子统一走 class 或 data- 属性，比如 data-testid="modal-close" 或 .js-modal-toggle。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
哪些地方看似必须用 id，其实可以安全替换？
ID 在 HTML 中可以存在，但只要不进 CSS 选择器，权重问题就不存在。真正不可替代的只有三类：
- 表单可访问性：
<label for="email"></label>必须对应<input id="email"> - 页面内跳转：
<h2 id="section-3"></h2>，且该 ID 不参与任何样式定义 - ARIA 关联：
aria-describedby="error-123"，ID 仅作语义凭证
其他所有场景都能换：
- JS 定位改用
document.querySelector('.user-card__delete')，类名足够唯一 - 上下文区分改用属性选择器：
[data-page="product"] .product-card__price，权重仍是 0,1,0 - 动态插入的模态框根节点，用
id="modal-root-123"+class="modal-root"，CSS 只认 class
重构旧项目时最容易踩的坑是什么？
不是找不到所有 #xxx，而是删完 CSS 里的 #sidebar-nav 后，JS 还在调用 getElementById('sidebar-nav')，功能当场断掉。
关键顺序必须是：
- 先确认所有 JS 已迁移到
querySelector或框架 ref - 再移除 CSS 中所有
#规则，用 BEM 类名（如.sidebar-nav）替代 - 最后才清理 HTML 中冗余的
id，或改为仅语义用途（如id="sidebar-nav-anchor"）
最隐蔽的问题，往往藏在第三方插件或老代码的 #app .component 这类“看似无害”的写法里——它已经把权重抬高，只是你还没开始覆盖它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
