u-是工具类唯一合理前缀，用于划清作用域边界、避免与第三方库或旧代码冲突；u-类须保持原子性，禁止伪类和子选择器，仅支持单类名声明及响应式变体。
工具类必须加 u- 前缀，否则迟早和第三方库或旧代码打架——这不是预防，是止损。
为什么 u- 是工具类唯一合理前缀
不加前缀的 hidden、flex、text-center 在项目里等于裸奔：Ant Design 的 .ant-btn 可能悄悄覆盖你全局的 button:focus；老项目遗留的 .clearfix 会和 Tailwind 的同名工具类冲突；Webpack CSS Modules 开启后，没前缀的类还可能被模块化截断，导致样式丢失。
用 u- 不是为了“看起来规范”，而是明确划出作用域边界：
-
u-hidden表示“这是一个纯视觉开关，不带业务语义” -
u-mt-4表示“这个边距只服务于布局辅助，不绑定任何组件生命周期” -
u-flex表示“这是临时对齐手段，不是card__header的固有行为”
u- 和 c-、l- 的职责绝对不能混
常见错误是把组件内部的布局逻辑抽成 u-flex，然后在 c-card__header 上硬套：class="c-card__header u-flex"。这等于把组件行为外包给工具类，结果就是：
- 某天要改
c-card__header的 flex-direction，却发现u-flex在 20 个地方被复用，不敢动 -
u-flex默认flex-direction: row，但c-modal__footer需要 column，只能再加u-flex-col，工具类膨胀失控 - 调试时看到
u-flex完全无法反推它属于哪个业务场景
正确做法是：c-card__header 自己声明 display: flex 和方向；u-flex 只用于无上下文的临时容器，比如弹窗蒙层里的居中盒子。
怎么写才不被第三方库反向污染
当你要定制 react-datepicker 的输入框样式，又不能改它的源码，直接写 .date-picker__input { ... } 很危险——它可能和你项目里某个 c-form__input 的规则碰撞，或者被 Ant Design 后续版本注入的同名类覆盖。
安全写法是双保险：
- 外层加命名空间容器：
<div class="myapp-date-picker"><datepicker></datepicker></div> - CSS 中严格前置：
.myapp-date-picker .date-picker__input { padding: 8px; }，绝不用.myapp-date-picker.date-picker__input（拼接类名会失效） - 如果第三方类名不固定（如动态生成的
el-input__inner），用属性选择器软拦截：.myapp-ui [class^="el-"] { font-size: 14px; }，并确保该 CSS 文件顶部有/* webpackMode: "global" */注释（避免被 css-loader 模块化）
容易被忽略的细节：u- 类不该包含伪类或子选择器
工具类的核心是原子性。一旦出现 u-btn:hover 或 u-list > li，它就不再是“可自由组合的单一功能”，而成了隐式组件——后续想在 u-list 里换用 ul 或 ol 就会出问题。
所以 u- 规则里只允许：
- 单类名直接声明（
u-mt-2 { margin-top: 0.5rem; }） - 媒体查询响应式变体（
@media (min-width: 768px) { .u-mt-2\@md { margin-top: 1rem; } }） - 禁止出现
:hover、:focus、>、+等任何依赖上下文的选择器
需要交互状态？那是 c-button--hovered 的事，不是工具类该管的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
