bem本身不提升还原度，但它是让“还原度可验证、可协作、可长期维持”的最小公约数；设计稿切出来样式对不上，90%不是写错font-size，而是类名未锁死语义归属。
直接说结论：BEM 本身不提升还原度，但它是让“还原度可验证、可协作、可长期维持”的最小公约数；设计稿切出来样式对不上，90% 不是写错了 font-size，而是类名没锁死语义归属。
为什么 .title 在设计稿里是 16px，上线后变成 14px
根本原因不是 CSS 写错了，而是 .title 这个类名泛化了——它可能被 .card、.modal、.user-profile 同时使用，而其中某个父级设置了 font-size: 0.875rem，导致子元素继承错乱。BEM 强制把语义锁死在块内：.product-card__title 只响应 .product-card 下的规则，不会被 .user-card__title 干扰，也不会因外层缩放失效。
- 常见错误现象：
.section-2__title、.page-header这类名字高频出现，但它们没有业务含义，一换页面就失效 - Block 必须带业务语义：
.search-result-item✅，.top-banner❌ - Element 命名不回溯父级：
.user-profile__name✅，.user-profile__user-profile-name❌（冗余且难维护）
设计师改了 button--large 的 padding，为什么只有首页生效
因为 button--large 没绑定到具体 Block 上。如果多个地方都用 .btn + .large 组合，那修改 .large 就得全局评估影响；而 BEM 要求修饰符必须作用于明确 Block：.button--size-large 或 .primary-button--size-large，才能确保变更只影响目标组件。
- Modifier 值必须语义化：
.button--primary✅，.button--blue❌（换主题时要全局搜替换） - 禁止 Modifier 嵌套：
.button--primary--disabled是反模式，应组合使用：.button--primary.button--disabled - Element 级 Modifier 必须带 Block 前缀：
.button__icon--spin✅，.icon--spin❌（脱离上下文，无法定位）
怎么让设计师和前端对得上同一个类名
约定所有设计稿中的图层名严格匹配 BEM 结构：Figma 里写 button（Block）、button__text（Element）、button--loading（Modifier），而不是 blue-btn 或 big-icon。前者可直接 grep 查找，后者每次对齐都要靠人工解释。
- 禁用视觉描述当类名：
header__icon✅，big-icon❌ - 组件文档页必须放“类名对照表”：
button→ 对应 Figma 页面 “Button / Primary”，附截图+色值+尺寸 - 使用 Figma 插件自动标注 BEM 层名，避免手输错误（如把
__写成_或--写成-）
BEM 最容易被忽略的复杂点，是它不解决“这个组件该不该存在”，只规范“一旦存在，该怎么命名”。比如设计稿里一个“带角标的头像”，如果角标在用户页、通知页、消息页行为不一致，那它就不该是 .user-avatar__badge，而该拆成两个独立 Block：.user-avatar 和 .notification-badge，否则还原度再高，也是错的复用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
