bem 中不存在跨组件修饰，因其禁止跨组件样式依赖；.card .button 等后代选择器会导致样式耦合、布局错位和权重失控；应使用 css 自定义属性统一设计令牌，并通过 wrapper 安全嵌入第三方组件。

跨组件修饰在 BEM 中根本不存在——BEM 明确禁止任何形式的跨组件样式依赖，所谓“跨组件修饰”是误用后代选择器或共享类名导致的耦合现象。

为什么不能写 .card .button 这类选择器

BEM 的 Block 是独立封装单元，每个 Block 必须有全局唯一名（如 profile-card、ui-button）。写 .card .button 会带来三个实际问题：

• 一旦 .button 样式调整，所有卡片里的按钮都意外变更，无法局部控制
• 两个不同组件若都用了 .title，一处改 margin，另一处布局直接错位
• CSS 选择器权重失控：.card .button 比 .ui-button--disabled 权重高，导致状态样式被覆盖

视觉对齐该怎么做：用 CSS 自定义属性代替类名继承

想让 profile-card__cta 和 notification__action 按钮高度/颜色一致，不能靠共用类名，而应提取设计令牌：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 在 :root 或 Block 级作用域定义：--cta-height: 40px、--cta-bg: #007bff
• 各 Block 内部用自己的类名消费：.profile-card__cta { height: var(--cta-height); }
• 变量天然支持层叠和局部重写，比 class 优先级更可控，也兼容暗色模式与缩放

嵌入第三方组件时，wrapper 是唯一安全出口

把 Ant Design 的 <button></button> 塞进 profile-card，不能碰它原生类名，也不能写 .profile-card .ant-btn：

• 正确做法：外层 DOM 加 wrapper 类 —— <div class="profile-card"><button classname="profile-card__trigger"></button></div>
• CSS 中只用该 wrapper 限定：.profile-card__trigger { padding: 0 16px; }，不触碰 .ant-btn 本身
• 如需调整内部样式（如输入框内边距），必须带 wrapper 前缀：.profile-card:deep(.ant-input) 或 .profile-card [class^="ant-input"]

最易被忽略的是：modifier 组合必须显式声明，不能靠父级推导。比如 profile-card--highlighted 不会自动让其内部的 profile-card__title 变色，得单独写 .profile-card--highlighted .profile-card__title 或用变量联动。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！