共享样式应通过CSS自定义属性（设计令牌）实现，而非类名继承；需语义化命名、跨块高频复用、作用域内提前声明，禁止!important和magic number。
共享样式不能靠类名继承，得靠CSS自定义属性
直接复用 .button 类到 .card__action 或写 .button, .card__action { ... } 是反BEM的。BEM 要求每个块/元素样式自治，一旦共用类名，改一处就全崩。真正安全的共享方式是提取设计令牌（design tokens），用 CSS 自定义属性统一管理。
- 把重复出现的数值、颜色、间距等抽象成语义化变量，比如
--spacing-md、--color-primary、--radius-sm - 变量定义在
:root（全局）或 Block 级作用域（如.button { --button-padding: var(--spacing-md); }），避免污染全局 - 各 Block 内部用自己的类名消费变量：
.button { padding: var(--button-padding); }、.card__action { padding: var(--button-padding); } - 禁止用
!important强行覆盖变量——变量本身支持局部重写，比如.card__action { --button-padding: var(--spacing-lg); }
哪些样式值得提取？看是否满足“跨块高频复用+语义稳定”
不是所有重复都要抽。只有那些在多个 Block 中反复出现、且含义明确不变的才适合提成变量。比如按钮内边距、卡片圆角、标题行高——它们代表设计系统中的原子级约束；而 font-weight: 600 单独出现不算，必须和 font-size、line-height 组合成一套文本层级才值得封装。
- ✅ 推荐提取：色彩系统（
--color-success）、间距标尺（--space-4）、圆角阶梯（--radius-lg）、阴影模板（--shadow-card） - ❌ 不该提取：单次使用的 magic number（如
margin-top: -2px）、仅用于某 Block 内部微调的值、带业务逻辑的硬编码（如width: 320px） - ⚠️ 注意：变量名必须语义化，不带技术细节。用
--text-heading，别用--font-size-24—— 后者一旦设计稿改成 22px，变量名就失效
动态 modifier 的样式共享要显式声明，不能靠 JS 拼接类名推导
像 clsx(`${block}--${size}`) 这种写法，PurgeCSS 默认会删掉未在模板中字面出现的 --small、--large 类。想让它们被识别并共享样式，必须提前声明变量绑定关系。
- 在 CSS 中为每个 modifier 显式设置变量：
.button--small { --button-padding: var(--spacing-xs); }、.button--large { --button-padding: var(--spacing-xl); } - 确保这些 modifier 类名出现在 PurgeCSS 的
safelist或模板中，否则变量虽定义但无载体 - 不要指望 JS 动态拼出的类名能自动触发对应样式——BEM 的 modifier 必须是静态可解析的，否则工具链和协作都不可靠
第三方组件嵌入时，wrapper 是唯一可共享样式的入口
你没法改 Ant Design 或 MUI 的内部类名，也不能给 AntButton 加 button--primary。唯一可控点是外层 wrapper，它既是作用域边界，也是样式共享的锚点。
立即学习“前端免费学习笔记（深入）”；
- HTML 中加 wrapper 类：
<div class="profile-card__cta"><AntButton /></div> - CSS 中只通过 wrapper 限定作用域：
.profile-card__cta { padding: var(--spacing-md); }，不碰.ant-btn本身 - 若需调整子节点（如输入框），用
:deep()或属性选择器，但必须带 wrapper 前缀：.profile-card__form:deep(.ant-input) { padding: var(--spacing-sm); } - 这种模式下，
--spacing-sm就成了跨 Block（profile-card + antd）共享的唯一可信通道
.card__title 里写 font-size: var(--text-lg)，就得保证这个变量已在作用域内声明，而不是指望从 .card 上继承过来。 
