bem本身不自动带来高内聚低耦合，它只提供命名框架；真正起作用的是用__和--划清模块边界、拒绝跨块样式、约束元素层级。
直接说结论：BEM本身不自动带来高内聚低耦合，它只提供命名框架；真正起作用的是你如何用__和--划清模块边界、拒绝跨块样式、约束元素层级。
怎样定义一个真正独立的 Block
Block 不是“看起来像按钮的那个 div”，而是能脱离上下文独立存在、有明确定义输入/输出的 UI 单元。比如 button 必须能单独渲染为 <button class="button"></button> 或 <div class="button">，不能只是 <code><div class="button"><span>...</span></div> 里那个没语义的包裹层。
- 文件名、组件名、Block 类名三者必须严格一致：
Button.vue→button，不是btn或ui-button - 禁止把视觉上重复但语义不同的东西塞进同一个 Block：header 中的 icon 和 footer 中的 icon 大小/颜色/间距全不同，就必须拆成
header__icon和footer__icon，而不是共用icon - 目录结构必须一一对应：
/components/button/下只允许button.css、button.tsx等，不能出现card.css或icon/子目录
为什么 __ 不能嵌套，-- 不能乱用
__ 是归属声明，不是 DOM 路径；-- 是状态开关，不是样式快照。写错就会让下游开发者在真实项目里查两小时——浏览器不报错，但样式就是不生效。
-
card__content__title❌：违反 BEM 扁平原则，应改为card__title或另起contentBlock -
button--primary__icon❌：解析失败，BEM 工具直接忽略；正确是button__icon--primary（图标自身状态）或button--primary（整个按钮变体） -
button--bg-blue-500❌：颜色细节属于 CSS 变量职责，不是 BEM 修饰符该管的事；应统一用button--primary+var(--color-primary)
怎样避免 CSS 选择器破坏块的独立性
只要出现空格、>、+ 这类组合器，就等于在代码里埋下耦合炸弹——DOM 结构一动，样式就断，且无法被其他 Block 安全复用。
- 禁用跨块选择器：
.card .button❌，必须用card__button显式声明 - SCSS 中只允许
&__和&--嵌套：.button { &__icon { ... } &--large { ... } }✅，但.button__text { &--highlighted { ... } }❌（生成非法类名） - HTML 中元素位置有硬约束：
button__text必须是button的**直接子节点**，中间不能隔<div>；否则样式规则失效，且无法靠工具自动检测 <p>最常被忽略的一点：BEM 的契约价值不在 CSS 文件里，而在 Code Review 和 PR 描述中。比如 <code>button__icon是否支持size参数、button--loading是否会禁用点击、card--featured是否要求内部必须含card__badge——这些都得写进文档，而不是靠开发者猜。工具可以校验__和--写对没，但没法判断你有没有漏掉这个契约。
