id选择器权重固定为100导致样式复用失败，因其远超类选择器（单个10），使组件内类名规则易被父级id选择器覆盖；根本原因是id语义错位——本应唯一标识，却被滥用于样式控制，破坏bem、主题切换与组件复制能力。
为什么ID选择器权重100会让样式无法复用
ID选择器权重固定为100，而一个类选择器只有10。这意味着哪怕你写.btn--primary.btn--large.btn--loading（三个类，总权重30），也压不过页面里任意一个#sidebar或#header——它不看“写了几个”，只认数字。样式一旦被#main .content锁死，你就没法在组件内部用.card__title安全覆盖颜色、间距或字体，因为权重差了70分起步。
复用失败的典型现场
常见错误现象直接暴露问题本质：
- 改了
.modal__close的color，DevTools 里看到被#user-modal .modal__close划掉（权重110） - 想给按钮加
is-disabled状态，结果.btn--disabled被父级#form .btn挡住，只能加!important - 第三方弹窗组件用了
#dialog-root，你写的.dialog__body规则完全不生效，连主题切换都断掉
真正卡住复用的不是权重数字，而是语义错位
ID 的设计本意是“唯一标识”，不是“样式开关”。当你把id="nav"同时用于 JS 定位、锚点跳转和 CSS 样式，就等于把三件事绑死在一个变量上。结果是：
- 组件无法复制：两个
id="nav"会破坏 DOM 唯一性，JSgetElementById只返回第一个，SSR hydration 直接报错 - 主题无法切换：
.theme-dark #nav权重200，下个需求要加动画就得写#nav.theme-dark.is-animated，越堆越难维护 - BEM 失效：你写
.nav__item--active，但#nav .nav__item已经占了高位，修饰符根本没机会介入
绕开ID权重陷阱的实操底线
不是删ID，而是重定向它的用途：
- HTML 中保留
id="section-2"，但同步加上class="section section--2"；CSS 只对.section--2写规则 - JS 获取元素改用
document.querySelector('.js-nav-toggle')，而不是getElementById('nav-toggle') - 表单关联、ARIA 属性、锚点跳转这些不可替代场景，继续用 ID；其余一律交由 class 驱动
- 检查框架组件文档，禁用
:style或style={}注入，避免内联样式（权重1000）和 ID 双重封锁
最常被忽略的一点：权重冲突往往不是你写错了，而是某条#app .widget规则来自第三方库或 SSR 模板，它不在你控制范围内。先打开 DevTools 禁用element.style和所有带#的选择器，再逐条排查来源，比硬调权重快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
