不能用btn__icon--large等bem命名替代工具类，因其将尺寸语义绑定具体组件上下文，破坏原子性与复用性；必须使用u-前缀+@layer utilities隔离作用域，避免样式冲突。
为什么不能给工具类套用 btn__icon--large 这类BEM命名
这类写法表面像工具类，实则破坏了工具类的原子性：它把尺寸语义（--large）强行绑定在 btn__icon 这个上下文里，导致 user-card__avatar--large 必须重复写一遍，无法复用。设计系统升级时，所有带 --large 的 modifier 都得全局搜索替换，而不是只改一个 u-icon-lg。
必须用 u- 前缀 + @layer utilities 隔离作用域
没前缀的 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 块内：
@layer utilities {
.u-p-4 { padding: 1rem; }
.u-text-sm { font-size: 0.875rem; }
}
否则 .card__content u-p-4 会被 .card__content { padding: 1rem } 覆盖——工具类本应“低权高覆盖”，靠 @layer 控制层叠顺序才是正解。
组件中如何安全组合工具类与BEM类名
直接混用没问题，但要注意三点：
- 工具类和BEM类名共存时，不要在BEM规则里用子选择器匹配工具类（如
.btn__icon .u-p-2），那会隐含结构依赖 - 禁止在工具类里写伪类（
.u-hover-bg-blue:hover）、CSS变量（background: var(--color-primary)）或子选择器（.u-flex > *）——它们不是原子规则 - BEM组件样式不加
@layer，默认落在utilities之后，天然具备更高优先级，能安全覆写工具类
示例写法：
<button class="btn btn--primary u-p-4 u-rounded u-shadow-sm">Submit</button>
第三方组件库中怎么用工具类不翻车
BEM本身不解决第三方样式冲突，硬加项目前缀（如 myapp-el-button）会破坏其内部选择器链（.el-button.is-disabled 失效）。真正有效的做法是：
- 用 wrapper block 包一层，比如
form-field--date - 在 wrapper 内用属性选择器限定作用域：
.form-field--date .el-input__inner - CSS Modules 下必须用
:global(.el-input)显式穿透，否则styles['el-input']是undefined - 注意样式注入顺序：如果 Ant Design 的 CSS 是入口顶部
import的，它可能因 specificity 更高而赢过你的.form-field--date :deep(.el-button)
最常被忽略的一点是：工具类的语义必须纯视觉、无上下文、零逻辑。一旦在 u- 类里塞进业务状态或响应式断点，就退化成一堆难以收敛的“伪工具类”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
