bem能直接砍掉specificity计算负担，因其强制使用单类名选择器（如.button--primary），避免嵌套导致的dom回溯和权重叠加，从而提升匹配性能并确保样式稳定。
为什么BEM能直接砍掉Specificity计算负担
浏览器匹配CSS时从右往左找“关键选择器”，.button--primary这种单类名就是最轻量、最确定的关键选择器；一旦写成.button .button--primary或nav .button--primary，左侧部分就会触发DOM回溯——查完元素还得往上翻父节点，性能掉、结构一动就失效，还凭空加了10点specificity权重。
常见错误现象：.header__nav-item:hover不生效，结果发现HTML里是<li class="header__nav-item">，但CSS写了.header__nav .header__nav-item——这既违反BEM语义（.header__nav根本不是block容器），又让后续所有扩展都得跟着提权。
- 所有BEM规则必须以单个类名为选择器起点：
.search-form__submit✔️，.search-form .search-form__submit❌ - 禁止用标签名强化，如
button.search-form__submit——框架可能换标签，样式立刻断裂 - Element和Modifier必须绑定Block：
.search-form__input--error✅，.search-form__input.error❌（后者权重虽高，但破坏状态封装）
多个Modifier共存时样式覆盖错乱怎么办
不是BEM不支持叠加，而是你把不同维度的样式塞进了同一属性。比如.button--primary设background，.button--large也设background，后声明的那个必然赢——哪怕它们语义上完全正交。
- 正确做法是让每个Modifier只管自己那块地：
.button--primary管颜色，.button--large管padding和font-size，.button--disabled管opacity和cursor - 检查所有Modifier是否重复定义相同CSS属性（尤其是
background、border、color） - 避免用Modifier干布局活，例如
.button--full-width应改为工具类.w-full或独立布局规则 - 声明顺序很重要：基础类
.button放最前，Modifier按常用组合频率排序（如--primary常和--large一起用，就把--primary放--large前面）
第三方CSS入侵时怎么守住BEM防线
BEM不改变第三方类名，也不阻止别人写div.header img。它只保证：你写的部分，边界清晰、可定位、不越界。
- 第三方组件（如
react-datepicker）输出的类名不可控，必须包一层wrapper block：<div class="form-field--date"><datepicker></datepicker></div> - 用wrapper block隔离：
.myapp-form-field--date .ant-date-picker，而不是试图覆盖.ant-btn -
!important是反模式：它会破坏BEM的modifier覆盖链，比如button--primary本该覆盖button的颜色，却被外部!important截断 - 禁止跨block写组合选择器：
.card .button是反模式；应拆出新block或改用.card__action-button
构建阶段加前缀时最容易踩的坑
加前缀不是往每个类名前面塞字符串，而是用工具在构建阶段自动注入，且只作用于你自己的block范围。
- Webpack + css-loader配
modules: { auto: true }，再用postcss-prefix-selector插件，规则写成prefix: '.myapp-'，它只会给.button、.button__icon这类你写的类加前缀，不会碰第三方 - 插件配置里必须排除
/^\.ant-/、/^\.el-/等正则，否则会误处理第三方选择器 - JS层永远别手拼带前缀的字符串：
className={`myapp-button myapp-button--${variant}`}❌；要用clsx+CSS Modules导出对象：clsx(styles.button, styles[`button--${variant}`])✅ - 前缀解决不了注入顺序和
<link>加载竞争——这是构建产物隔离问题，不是命名问题
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
