BEM类名自带上下文与作用域，脱离DOM结构仍可独立生效：如.card__title不依赖父级存在，迁移时无需调整HTML或选择器，复用成本极低。
因为 BEM 类名自带上下文和作用域，复制粘贴到新页面时不用改 HTML 结构、不用调选择器层级、也不用担心样式被外层污染——只要类名写对，样式就生效。
类名脱离 DOM 结构也能独立工作
传统写法 .card .title 依赖父级存在；BEM 写成 .card__title 后，不管它在 <section class="user-card"></section> 还是 <div class="product-list"> 里，只要加了这个类，样式就挂得上。
<ul>
<li>浏览器匹配 <code>.card .title 是从右往左找「所有 .title，再向上查有没有 .card 父级」，HTML 一变就断
.card__title 是单类名直连，不依赖任何祖先节点，迁移成本趋近于零.form__field__input__error，而应拆成独立 block：.validation-message--error，复用时直接拎走修饰符必须绑定到具体 UI 单元，避免状态逻辑藏在父级
状态不是“整个卡片禁用了”，而是“标题要灰掉”或“按钮不可点”——哪个视觉单元变了，就在它的类上加修饰符，而不是靠 .card--disabled .card__title 降权控制。
- 错误做法：
.card--disabled .card__title { opacity: 0.5; }，后续单独启用.card__title时还得额外覆盖 - 正确做法：
.card__title--disabled或.card__action-button--disabled，JS 控制类名更精准，测试也更容易 - 禁止
.card__title--disabled--bold这种叠加修饰符；设计若真有该组合，应定义为单一语义修饰符：.card__title--disabled-bold，并确保 CSS 规则存在
工具链能自动识别结构，但一个下划线错就全失效
stylelint-selector-bem-pattern、postcss-bem-linter、VS Code 的 BEM Helper 插件，全都靠正则匹配 __ 和 -- 来解析结构。写成 user_name 或 card-element，它们就当没看见。
立即学习“前端免费学习笔记（深入）”；
-
user_name被误判为 blockuser+ elementname，但实际name并非user块的合法元素 -
card-element被当作普通块名，无法提取 element 层级，CI 阶段直接报Unexpected BEM structure - IDE 的 Auto Rename Tag 插件只监听
__/--模式，改header__logo不会同步更新header-logo对应 CSS
真正卡住复用的从来不是命名长度，而是类名是否明确回答了三个问题：它属于谁？它是什么角色？它当前什么状态？缺一个，复制过去就得修、就得试、就得猜。
