bem类名如.card__title--large特异性恒为0-1-0，不存在高权重；所谓“覆盖不了”实为写法错误（如漏基础类）或被body *等外部规则干扰。
根本不存在“BEM产生的高特异性选择器”——BEM的正确用法只会产出0-1-0特异性，所谓“覆盖不了”，99% 是你没写对，或被外部规则干扰。
为什么.card__title--large根本不是高特异性
BEM类名如.card__title--large在浏览器中计算为 1 个类选择器，特异性恒为 0-1-0。它和.btn权重完全一样，不存在“需要更高权重来覆盖”的逻辑。
- 真正抬高特异性的写法是：
.card .card__title（0-2-0）、div.card__title（1-1-0）、#header .card__title（1-1-0） - 所有带空格、标签、ID的选择器，都已脱离BEM语义，也自动放弃BEM的权重可控性
- DevTools里看到样式被划掉，右键“Reveal in Sources”往往指向
body * { ... !important }或.theme-dark .card .title这类泛化规则，而非BEM本身
.button--disabled单独写无效的真正原因
Modifier类不是独立样式单元，它的生效依赖两个前提：HTML中基础类必须共存、CSS声明顺序必须合理。
- ❌ 错误写法：
class="button--disabled"→ 浏览器找不到匹配的.button上下文，.button--disabled规则根本不会应用 - ✅ 正确写法：
class="button button--disabled"，且CSS中.button定义在前，.button--disabled在后 - 构建工具若开启CSS Modules或类名哈希（如
button_abc123），必须确保localIdentName保留__和--结构，否则button__icon会被转成buttonicon_abc，直接失配
要覆盖第三方组件，别碰它的BEM类名
给.ant-btn加前缀如.myapp-ant-btn会破坏其内部选择器链（比如.ant-btn:disabled、.ant-btn .ant-btn-icon），属于高危操作。
- ✅ 安全做法：用 wrapper block 包裹，例如
class="form-field--date"，再写.form-field--date .ant-btn { width: 100%; } - ⚠️ 注意顺序：
.ant-btn原始样式必须先加载，你的覆盖规则后加载；若用:deep()或:global()，需确认作用域未被编译剥离 - ? 禁用
!important覆盖第三方样式——它会打断BEM自身的Modifier覆盖链，导致.button--disabled在某些环境突然不生效
最常被忽略的一点：只要项目里存在一条* { z-index: 0 !important }，所有BEM类名的z-index都会失效。BEM的防御力不在权重高低，而在归属清晰——问题出在哪，就能准确定位到哪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
