原子类禁止用于bem的__元素或--修饰符节点，因其破坏组件自治：如card__header上写u-p-4会导致内边距无法统一维护；必须仅用于block根元素，并通过@layer utilities/components分层控制优先级，禁用!important以保障modifier可覆盖。
原子类为什么不能出现在BEM元素内部
原子类（如u-p-4、u-text-center）一旦写在__元素上，就等于把布局/视觉控制权从组件逻辑里抽走，破坏BEM的自治原则。比如<div class="card__header u-p-4">，后续想统一调整所有<code>card__header内边距时，就得全局搜索u-p-4，而不是只改card__header样式。
常见错误现象：form__input u-w-full导致表单字段宽度脱离form上下文；button__text u-font-bold让字体粗细无法随按钮状态（button--disabled）动态调整。
- 原子类只允许出现在 Block 根元素上：
<div class="card u-rounded-lg u-shadow-sm"> ✅<li>禁止用于任何 <code>__元素或--修饰符节点 - 若某元素确实需要独立间距/颜色，应提升为新 Block（如
card-header），而非塞原子类
如何用 @layer 控制原子类与BEM的层叠优先级
没有@layer时，原子类常因声明顺序靠后而意外覆盖 BEM 的modifier规则，比如button--disabled设了opacity: 0.5，但后面加载的u-opacity-100把它顶掉了。
正确做法是显式分层，确保原子类永远处于底层：
@layer utilities {
.u-p-4 { padding: 1rem; }
.u-text-center { text-align: center; }
}
@layer components {
.button { /* 基础结构 */ }
.button--disabled { opacity: 0.5; }
}
-
@layer utilities必须在所有@layer components之前声明，否则无效 - SCSS 中不支持原生
@layer，需升级到 Dart Sass v1.33+ 并启用style选项 - 构建工具（如 PostCSS）需配
postcss-layer-grid插件才能识别和排序
哪些原子类会和BEM产生语义冲突
不是所有带u-前缀的类都安全。以下几类会直接瓦解 BEM 的边界契约：
-
u-flex、u-grid等布局类：它们定义容器行为，而 BEM 的__body或__footer本该承担这个职责 -
u-hover-bg-blue这类含伪态的类：BEM 的交互状态（如button--hover）应由 JS 控制类名增删，而非靠 CSS 模拟 -
u-bg-var(--primary)这种依赖 CSS 变量的写法：变量值可能在不同主题中变化，但button__icon的颜色语义应稳定可预期 -
u-hidden用于临时 DOM 控制：它绕过modal--hidden等 BEM 修饰符，导致状态不可追溯
真正安全的原子类只做静态声明：u-mt-2、u-text-sm、u-bg-50——无伪类、无变量、无响应式断点。
BEM组件里怎么安全复用原子类逻辑
不能直接用原子类，但可以封装成 BEM 内部的“受控变体”。比如按钮需要多种尺寸，别写<button class="button u-p-2"></button>，而是：
- 定义 BEM 修饰符：
button--small、button--large - 在
button.css里用@apply注入对应原子规则（仅限此文件内）：.button--small { @apply u-p-1 u-text-xs; } - 确保
@apply只出现在 Block 层，不在&__text或&--disabled里调用 - 禁用
!important，所有原子能力必须能被 modifier 覆盖（如button--disabled可重置u-p-1）
最易被忽略的是：一旦引入原子类体系，就必须同步建立废弃机制。比如u-p-3被button--medium绑定后，就不能再随意用于card__footer——否则改一个值，两处同时变，边界就消失了。
