CSS 中不建议用 #id 选择器做样式控制，因其优先级过高（100）、不可复用、破坏可维护性与组件化；仅限锚点跳转或 JS 临时状态场景，推荐改用 class + BEM 或原子类。
为什么 CSS 中不建议用 #id 选择器做样式控制
因为 #id 选择器优先级过高（100），且天然唯一、不可复用，会破坏样式的可维护性与组件化逻辑。它适合 JS 定位元素，不适合定义视觉表现。
#id 选择器在 CSS 中的实际问题
常见错误现象：改一个按钮样式，结果整个页面导航栏、弹窗标题全被意外覆盖；重构时不敢删 ID，怕样式崩，最后满屏 !important 补漏。
- ID 在 HTML 中必须唯一，但团队协作中极易重复（比如多人写
id="header"） - 一旦用
#user-panel写了 20 行样式，后续想抽成可复用的「面板」组件就只能重写 - CSS 模块化方案（如 CSS Modules、Vue Scoped）完全不支持 ID 选择器作用域隔离
- Web Components 的 Shadow DOM 中，
#id无法穿透作用域，导致样式失效
什么情况下可以破例用 #id 选择器
仅限两类明确场景，且需同步加注释说明原因：
- 锚点跳转专用 ID：
第三部分
- JS 驱动的临时状态样式，如
#modal-root.active { opacity: 1; }，且该 ID 由 JS 动态插入、生命周期可控
注意：即便如此，也推荐改用 [data-modal="active"] 或 class 切换，更利于调试和解耦。
替代方案：用 class + BEM 或原子类更稳妥
不是“禁用 ID”，而是把样式责任交给更合适的选择器机制。BEM 和原子类都能避免命名污染和优先级冲突。
.btn {
padding: 8px 16px;
}
.btn--primary {
background: #007bff;
}
.btn--large {
padding: 12px 24px;
}
对比下面这种危险写法：
#save-btn {
background: #007bff;
padding: 12px 24px;
border-radius: 4px;
}
前者能复用、能组合、能覆盖；后者一旦出现 #save-btn:hover 和 .form-footer #save-btn 就得靠权重硬刚，越往后越难收场。
ID 的语义是“这个元素在文档里独一无二”，不是“这个样式只配给它用”。样式本该描述外观特征，而不是绑定某个具体 DOM 节点的身份。这点容易忽略，但项目越大越明显。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
