BEM 中 card__title 是元素而非独立块，其样式依赖 card 上下文；真正可复用的是 heading 等无父级绑定的块，判断标准是去掉前缀后能否无修改复用。
把 card__title 当成独立块使用，本质是混淆了“可复用单元”和“结构容器”
新手常写 .card__title 然后在别处直接复用它，比如塞进 .modal 或 .article 里——这说明他们误把元素当成了块。BEM 中 card__title 的语义是「属于 card 这个块的标题」，不是「一个通用标题组件」。一旦脱离 card 上下文，它的样式、间距、字体缩放逻辑大概率失效。
真正该复用的是 heading 这类独立块：.heading、.heading--h2、.heading--compact，它不绑定任何父级结构，只描述自身角色与变体。
- 判断标准：这个类名删掉前缀（如去掉
card__）后，是否还能在其他页面/组件中无修改地用？能 → 它本该是块；不能 → 它确实是元素 - 常见错误：
.user-card__avatar被复制到个人资料页单独使用，结果头像圆角、尺寸、加载状态全错位——因为user-card__avatar隐含了卡片内边距、阴影继承等上下文依赖 - 重构提示：当发现某元素在两个以上不同块中重复出现，且样式逻辑高度一致，就该立刻提级为独立块，比如
.price-tag、.status-badge
误用 HTML 标签语义反推 BEM 结构，比如给 span 加 __class
看到 <span class="card__title"> 就认定 “span 是元素，所以 card__title 是合法元素名”，这是典型倒置逻辑。BEM 不由标签决定，而由功能边界决定。span 只是渲染载体，card__title 却承载了「卡片标题」这一业务语义——它本应是一个具备完整样式契约的 UI 单元，理应支持 card__title--truncated、card__title--with-icon 等修饰符，而不是靠外部 JS 控制 span 的 class 列表来模拟。
- 危险信号：用
span、div包裹内容却只加一个__类，没配套定义其自身的--修饰符或响应式行为 - 正确做法：哪怕只是文字容器，只要承担明确角色（如副标题、时间戳、状态标签），就该有自己完整的 BEM 命名空间，例如
.card__subtitle，并允许独立加--faded或--highlighted - 性能影响：过度依赖
span+ 单一__类，会导致 CSS 规则无法复用，每个新场景都要写新选择器，最终生成大量低效的单类规则
工具链缺失导致命名退化：没有 stylelint 就看不出 __ 漏写
新手写 card_title 或 card-title，IDE 不报错、编译不失败、浏览器照样渲染——但所有 BEM 工具链（stylelint-selector-bem-pattern、Sass 的 &__ 嵌套、VS Code 类名跳转）全部失效。他们不知道问题出在哪，只觉得 “BEM 写起来好麻烦”，于是悄悄退回裸类名。
立即学习“前端免费学习笔记（深入）”；
- 必须配的最小工具集：
stylelint+stylelint-selector-bem-pattern（规则设为 error），否则card__title和card_title在开发时毫无区别 - VS Code 插件如
BEM Tools能高亮__和--，但前提是开发者先意识到它们是语法分隔符，不是“多打几个字符” - 构建阶段漏检后果：PurgeCSS 会把
card_title当作无效类名删掉，线上突然样式丢失，却查不到原因
最易被忽略的点：BEM 不是“起名规范”，而是“接口声明”
写 card__title 的那一刻，你就在向团队承诺：这个类名只用于卡片内的标题，它不会影响其他模块，也不接受外部结构强依赖。一旦把它当块用，就等于撕毁这份契约——后续没人敢动 card__title 的样式，怕崩掉其他地方；也没人敢删它，因为不知谁还在引用。
真正的断点不在命名格式，而在每次敲下 __ 前有没有问一句：这个 UI 片段，下次出现在另一个页面时，我愿不愿意直接复制粘贴这段 HTML 和 class？ 如果答案是否定的，那它就不该是元素。
