工具类禁用bem命名，须用u-前缀隔离、纯视觉职责、@layer utilities管控层叠；因bem绑定上下文，破坏跨组件复用性，且无前缀易引发样式冲突。
工具类不该用 BEM 命名，否则会破坏原子性、引发命名膨胀、干扰组件语义。真正的做法是用前缀隔离 + 纯视觉职责 + 构建层管控。
为什么 btn__icon--large 不是合格的工具类
这类写法把 BEM 的结构逻辑硬套进工具场景，结果：
– btn__icon 是组件内元素，--large 却想表达通用尺寸，语义错位
– 同样需要“大号图标”的 user-card__avatar 无法复用该类，只能重复写 user-card__avatar--large
– 一旦改设计系统，所有带 --large 的 modifier 都得全局搜改，而不是只动一个 u-icon-lg
工具类的核心诉求是「跨组件自由组合」，而 BEM 的 __ 和 -- 天然绑定上下文，二者目标冲突。
u- 前缀不是可选项，是作用域安全线
没前缀的 flex、hidden、text-center 极易撞上：
– 第三方库（如 Ant Design 的 .ant-btn 内部用了 .hidden）
– 旧项目遗留样式（.text-center { text-align: center !important }）
– 其他团队写的 utility（.mt-4 vs .margin-top-4）
必须统一用显式前缀，推荐：
– u-：最简短，社区接受度高（Tailwind、Bulma 都类似）
– is-：适合状态类（is-hidden、is-loading），强调布尔值
– 禁止用 b- 或 base-，它们属于基础层，和工具类职责不同
工具类文件必须走 @layer utilities 控制层叠顺序
原生 CSS 的层叠靠选择器权重，但工具类本应“低权高覆盖”，否则 .card__content u-p-4 会被 .card__content { padding: 1rem } 覆盖掉。
正确做法：
– 在全局 CSS 入口顶部声明 @layer utilities
– 所有工具类写在 @layer utilities 块内
– BEM 组件样式不加 @layer，默认落在 utilities 之后
– 构建工具（PostCSS、Vite）需启用 postcss-nesting 或 postcss-layer 支持
示例：
@layer utilities {
.u-p-4 { padding: 1rem; }
.u-text-sm { font-size: 0.875rem; }
}
禁止在工具类里写伪类、变量注入或子选择器
工具类必须是「纯视觉、无上下文、零逻辑」的原子规则。以下全是危险操作：
– .u-hover-bg-blue:hover { background: #3b82f6 } → hover 状态不可组合，且被更具体的选择器（如 .btn:hover）轻易覆盖
– .u-bg-primary { background: var(--color-primary) } → 变量依赖主题文件加载顺序，SSR 时可能未定义
– .u-flex > * { margin-right: 0.5rem } → 子选择器破坏原子性，u-flex 和 u-mr-2 才是正解
真正安全的工具类只做三件事：
– 设置单个 CSS 属性（display、padding、color）
– 固定值或极简计算（calc(100% - 1px) 可以，clamp() 尽量避免）
– 响应式仅通过媒体查询包裹，不引入 JS 或自定义属性
最容易被忽略的是构建层——哪怕命名和规则都对了，如果 utilities.css 在打包时排在 components/ 之后，所有 u- 类都会失效。Webpack 中要确认 mini-css-extract-plugin 的 importOrder，Vite 中检查 css.preprocessorOptions 的 @import 顺序。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
