bem中跨组件共享修饰符需满足中立状态意图和安全叠加性，仅允许--hidden、--fluid、--tight、--sr-only四类；禁用--primary等业务语义类；须用单类名、低权重、后加载，并严格绑定标准bem块名。
跨组件共享修饰符不是加个 class 就行
直接写 .is-hidden 或 .u-text-center 这类“通用类”，在 BEM 体系里是反模式。BEM 的核心约束是「块级作用域」，而共享修饰符一旦脱离 block 上下文，就会破坏语义归属——.is-hidden 隐藏的是谁？按钮？卡片？还是整个页面？浏览器不报错，但协作时没人敢动它，因为不知道影响范围。
真正可复用的共享修饰符，必须满足两个条件：一是只描述**中立、无上下文的状态意图**（如 visibility、spacing、sizing），二是**必须能安全叠加到任意合法 BEM 块或元素上**，不依赖 DOM 结构、不覆盖关键交互属性。
哪些修饰符适合跨组件共享
不是所有状态都适合抽成全局修饰符。以下几类经实践验证可行，且符合 BEM 语义边界：
-
--hidden：仅控制display: none或visibility: hidden，不碰opacity或pointer-events（这些属于具体组件的交互逻辑） -
--fluid：设width: 100%+max-width: none，用于响应式容器拉伸，不侵入 padding/margin -
--tight：统一重置margin和gap为0，常用于列表、栅格内部微调，不改变 border 或 background -
--sr-only：纯无障碍隐藏（position: absolute; width: 1px; height: 1px;），不带任何视觉副作用
禁止共享的类型：--primary、--success、--large —— 它们语义绑定到具体组件的业务含义或尺寸策略，跨块使用必然导致样式冲突或维护断裂。
如何确保共享修饰符不破坏 BEM 权重与覆盖逻辑
共享修饰符最大的坑，是写成高权重选择器或用 !important，结果一加就盖掉所有 block 自身的状态样式。正确做法是让它们保持「最低必要干预」：
- 所有共享修饰符规则必须用单类名选择器：
.block--hidden { display: none; }，而不是.block.block--hidden - 避免设置 color、background、border、font-size 等视觉属性——这些应由 block 自身定义
- 若需重置间距，只设
margin和padding，不碰gap（flex/grid 容器才该管 gap） - 加载顺序必须在所有 block CSS 之后，否则
.button--disabled可能被.block--hidden的 display 覆盖而无法触发禁用态动画
示例错误写法：.block--hidden { opacity: 0 !important; pointer-events: none; } —— 这会让按钮即使加了 --disabled 也无法获得焦点管理能力，也破坏了可访问性。
动态添加共享修饰符时，DOM 结构容易被忽略
JS 动态切换 --hidden 或 --fluid 时，开发者常默认修饰符挂载在 block 根元素上。但实际场景中，有些组件结构不允许直接操作根节点（比如封装了第三方库的 <el-dialog></el-dialog>），这时强行加类会失效。
安全做法是明确约定：共享修饰符只对带有标准 BEM block 类名的元素生效，且必须由调用方保证该元素存在。例如：
<div class="card card--fluid"> <h2 class="card__title">标题</h2> </div>
不能写成：<el-card class="card--fluid"></el-card> —— 因为 el-card 渲染后 DOM 根节点类名是 el-card，不是 card，.card--fluid 规则根本匹配不到。
复杂点在于：共享修饰符无法解决「跨组件通信式状态」，比如“当侧边栏收起时，主内容区自动加 --fluid”。这种耦合必须由上层容器或状态管理驱动，不能靠修饰符自己推导。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
