全局工具类不能套用bem命名，否则破坏复用性、引发样式冲突、导致设计系统升级困难；必须用u-或is-前缀隔离作用域，写入@layer utilities，且禁止伪类、变量和子选择器。
全局工具类不能套用 BEM 命名，否则会立刻破坏复用性、引发样式冲突、让设计系统升级变成全局搜索替换灾难。
为什么 btn__icon--large 不是工具类
它表面像工具类，实则违背工具类本质：btn__icon 绑定在 btn 这个 block 下，--large 却想表达通用尺寸语义——上下文错位。结果是：user-card__avatar 无法复用该类，只能重复写 user-card__avatar--large；设计系统升级时，所有带 --large 的 modifier 都得全局搜改，而不是只动一个 u-icon-lg。
必须用 u- 前缀隔离作用域
没有前缀的 flex、hidden、text-center 极易撞上：
- 第三方库（如 Ant Design 的
.ant-btn内部用了.hidden） - 旧项目遗留样式（
.text-center { text-align: center !important }） - 其他团队写的 utility（
.mt-4vs.margin-top-4）
推荐前缀仅两种：u-（最简短，社区通用）、is-（仅限布尔状态，如 is-hidden）；禁用 b-、base- 等模糊前缀。
工具类必须写在 @layer utilities 中
原生 CSS 层叠靠权重，但工具类本应“低权高覆盖”。否则 .card__content u-p-4 会被 .card__content { padding: 1rem } 覆盖。
- 在全局 CSS 入口顶部声明
@layer utilities - 所有工具类必须写在
@layer utilities { }块内 - BEM 组件样式不加
@layer，默认落在utilities之后 - 构建工具需启用
postcss-nesting或postcss-layer
示例：
@layer utilities {
.u-p-4 { padding: 1rem; }
.u-text-sm { font-size: 0.875rem; }
}
工具类禁止伪类、变量、子选择器
工具类必须是「纯视觉、无上下文、零逻辑」的原子规则。以下全是危险操作：
-
.u-hover-bg-blue:hover→ hover 状态不可组合，且易被.btn:hover覆盖 -
.u-bg-primary { background: var(--color-primary) }→ SSR 时变量可能未定义 -
.u-flex > *→ 子选择器破坏原子性，应拆成u-flex+u-mr-2
真正可复用的不是 BEM 结构，而是命名逻辑：前缀表职责（u-），连字符分隔语义单元（u-mt-4），数字缩写表尺寸（u-mt-1 对应 0.25rem），色板编号表颜色（u-text-gray-700）。这些细节一旦松动，就容易退化成一堆难以收敛的“伪工具类”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
