BEM本身不减少回流和重绘，仅通过强制单类名选择器降低匹配开销并间接规避重排陷阱；真正触发重排的是width、height等几何属性变更，而非类名写法，错误在于混淆命名规范与渲染机制。
BEM 本身不减少回流（reflow）和重绘（repaint），但能显著降低你**意外触发**它们的概率——关键在于它强制你避开那些高风险的 CSS 写法。
为什么 BEM 类名不会让浏览器重排变快
浏览器在 layout 阶段根本不解析类名语义。.card__item 和 .item 的匹配开销几乎一致；真正触发重排的是 width、height、display、position 这类几何属性变更，不是类名写法。
常见错误现象：团队以为“用了 BEM 就能优化列表滚动”，结果长列表仍卡顿——问题其实出在未限制 height、用了 flex-wrap + 百分比 padding，或在 :hover 里改了 margin。
- BEM 是命名约定，不参与渲染管线，也不改变 DOM 结构或布局行为
- 它不解决
float、inline-block、table-layout等天然易重排的属性滥用问题 - 如果你的
.card__content里写了width: 100%+float: left，BEM 命名再规范也救不了性能
BEM 如何间接规避重排陷阱
它通过禁止嵌套选择器，切断了“改父级就连锁重排”的隐式依赖链。比如禁止写 .list .item，你就没法靠改 .list 的 display 去影响所有子项——因为每个 .list__item 必须自己声明完整样式，不继承、不假设父级状态。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
.list__item { display: flex; }—— 每个元素独立控制布局行为 - ❌ 错误：
.list { display: grid; } .list .item { ... }—— 改.list的display可能导致整列重算 - ⚠️ 注意：
.card:hover .card__title看似合理，但运行时需验证父级 hover 状态；应改为.card--hovered .card__title，由 JS 切换修饰符，避免伪类触发频繁样式计算
哪些 BEM 写法真会影响选择器匹配性能
浏览器从右往左匹配 CSS，关键选择器（最右边那个）决定初始查找范围。.header__logo--dark 是高效匹配；而 .page-home .layout-main .header .header__logo--dark 就会强制逐层回溯父节点，尤其在移动端 DOM 深、元素多时，开销明显上升。
- ✅ 正确：直接用
.header__logo--dark，不加任何祖先限定 - ❌ 错误：
.header .header__logo--dark或.header > .header__logo--dark—— 空格和>都引入后代/子代关系，破坏 BEM 扁平性 - 检查方式：DevTools → Elements → 选中元素 → Computed → Styles → 确认选择器是单类名（如
.form__input），而非带空格的组合
最容易被忽略的是：BEM 不防错，只管名字。它不阻止你写 width: calc(100vw - 20px) 这种高成本表达式，也不拦着你在 Modifier 里堆 !important；它只是把“谁该负责这个样式”这件事，显性地钉死在类名字符串上。
