bem本身不提升还原度，但它是让“还原度可验证、可协作、可长期维持”的最小公约数；它通过块级作用域命名（如.product-card__title）锁定语义，解决同名不同形、样式覆盖、设计与开发对齐难等核心问题。
直接说结论：BEM本身不提升还原度，但它是让“还原度可验证、可协作、可长期维持”的最小公约数。设计稿里一个按钮有 primary / disabled / loading 三种状态，如果类名是 .btn、.disabled、.loading，那开发时根本没法确定哪个 .disabled 属于这个按钮——它可能是表单的、弹窗的、还是侧边栏的。
为什么设计稿切图后样式总对不上
常见错误现象：.card-title 在 Sketch 里是 16px 加粗，上线后变成 14px；或者设计师改了 button--large 的 padding，结果只有首页生效，订单页没变。
- 根本原因不是字体或间距写错了，而是类名没绑定到具体组件上——
.title这种泛化命名，CSS 优先级、加载顺序、甚至父容器 font-size 都可能悄悄覆盖它 - BEM 强制把语义锁死在块内：
.product-card__title只响应.product-card下的样式规则，不会被.user-card__title干扰，也不会因外层font-size: 0.875rem导致行高错乱 - 还原度卡点常出现在“同名不同形”场景：比如设计稿中两个
icon，一个在 header，一个在 footer，视觉上大小/颜色/间距全不同——用 BEM 就必须写成.header__icon和.footer__icon，逼你意识到这是两个独立元素，不能共用一套 CSS
怎么让设计师和前端对得上同一个类名
使用场景：Figma 插件标注、PR 评审、视觉回归测试。很多团队卡在“设计师说改了 button--primary，前端查了一圈发现没生效”，其实是设计师指的 button--primary 是 Sketch 文件里的文本层名，而前端代码里写的是 .btn-primary。
- 约定所有设计稿中的组件层名严格匹配 BEM：
button（block）、button__text（element）、button--loading（modifier） - 禁止用“视觉描述”当类名：不要把 Figma 图层命名为
blue-btn或big-icon，而应是button--primary、icon--close——前者无法映射到代码，后者可直接 grep 查找 - 在组件文档页放“类名对照表”：
button→ 对应 Figma 页面 “Button / Primary”，并附截图+色值+尺寸。这不是增加流程，是减少每次对齐时的口头解释成本
构建可复用组件库时最容易漏掉的三件事
性能 / 兼容性影响：BEM 类名变长本身不影响渲染，但若搭配不当的构建配置，会导致压缩失效或 SSR 水合失败。
-
cssnano默认开启mergeLonghand，会把button button--primary button--disabled合并成button button--primary，丢失禁用态——必须在构建配置中显式禁用该选项 - 服务端渲染时，
className字符串必须和服务端生成的完全一致，否则 React 报Prop `className` did not match。别用 JS 拼接：el.className = 'button__text button__text--' + size，改用classList.add('button__text', 'button__text--large') - 第三方 UI 库（如 antd）别硬套 BEM：不要给
antd Button加class="button button--primary"去覆盖样式，而应通过theme配置或 CSS 变量定制，再用 BEM 类名包裹整个封装组件，比如<antdbuttonwrapper class="button button--primary"></antdbuttonwrapper>
真正难的不是写出 card__header--sticky，而是当产品提需求“这个卡片在详情页要加个阴影，在列表页不要”，你得立刻判断：这是新修饰符 card--shadowed，还是该抽一个新 block detail-card？BEM 不提供答案，但它让这个问题浮出水面——而不是藏在一堆 .card-shadow 里等线上出问题才被发现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
