bem禁止跨组件样式依赖，应通过唯一block名、禁用后代选择器、css自定义属性统一设计令牌、wrapper限定第三方组件样式、显式声明modifier来彻底切断耦合。
跨组件样式依赖本质是违反BEM设计原则
BEM 不允许跨组件样式依赖，所谓“依赖”其实是误用后代选择器或共享类名导致的耦合。比如写 .card .button 期望复用按钮样式，结果 .button 一改，所有卡片里的按钮都崩；或者两个组件都用了 .title，一处调间距，另一处布局直接错位。
真正该做的不是“处理依赖”，而是切断它：
- 每个 Block 必须有全局唯一名（如
profile-card、search-form），不能泛用card或form - 禁止在 CSS 中写跨 Block 的后代选择器，例如
.profile-card .button是非法的——.button应该属于自己的 Block（如ui-button），靠类名组合使用：profile-card__action ui-button - 若真需视觉对齐（如卡片内按钮和独立按钮保持一致），应通过 CSS 自定义属性统一设计令牌，而非共用类名：
:root { --button-padding: 8px 16px; }，再由各 Block 自己应用
需要复用样式时，用自定义属性而非类名继承
想让 profile-card__cta 和 notification__action 按钮看起来一样？别让它们共享 button 类，更不要写 .profile-card__cta, .notification__action { ... } 这种跨块选择器。
正确做法是提取可复用的设计参数：
- 定义语义化 CSS 变量，比如
--cta-height: 40px、--cta-bg: #007bff，放在根或 Block 级作用域 - 各 Block 内部用自己的类名消费这些变量：
.profile-card__cta { height: var(--cta-height); background: var(--cta-bg); } - 避免用
!important强行覆盖，变量本身支持层叠和局部重写，比 class 优先级更可控
第三方组件嵌入时，wrapper block 是唯一安全出口
把 Ant Design 的 <button></button> 塞进 profile-card 里，别试图给它加 profile-card__button 类，也别写 .profile-card .ant-btn —— 后者会随库升级失效，前者破坏其内部状态类（如 .ant-btn-disabled）。
标准解法只有一条路径：
- 在外层 DOM 加 wrapper 类：
<div class="profile-card"><button classname="profile-card__trigger"></button></div> - CSS 中只用该 wrapper 限定作用域：
.profile-card__trigger { padding: 0 16px; }，不碰.ant-btn本身 - 若需调整第三方组件内部样式（如输入框内边距），用
:deep()（Vue）或[class^="ant-input"]（通用 CSS），但必须带 wrapper 前缀：.profile-card:deep(.ant-input) { ... }
最易被忽略的点：modifier 组合必须显式声明，不能靠父级推导
有人写 .profile-card--compact .ui-button 以为能缩小按钮尺寸，这是危险操作。BEM 要求所有状态变化必须落在 Block 自身修饰符上，不能靠外部容器“传染”。
正确方式是让按钮自己响应 compact 状态：
-
profile-card--compact触发 JS 逻辑，同步给内部按钮加ui-button--compact -
ui-button--compact完整声明所有变更样式（padding、font-size、line-height），不依赖继承 - 禁止出现
.profile-card--compact .ui-button这类选择器——它把两个 Block 的状态耦合在一起，一旦ui-button被挪到别处，compact 就失效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
