工具类不应塞进bem block结构，而应统一用u-前缀原子化命名（如u-mt-4、u-flex），避免语义混淆与命名污染；clearfix等布局工具须作为全局u-clearfix或@mixin使用，且每个区块需保留bem类作语义锚点。
工具类不该塞进BEM block结构里
直接写 .clearfix__wrapper 或 .u-margin__top 是错的。BEM 的 block__element 关系只描述组件内部结构，而工具类（如 margin、flex、clear）不归属任何视觉块，也不渲染内容——它只是“怎么画”，不是“这是什么”。强行套用 BEM 会污染命名空间，比如 button__icon--u-hidden，既违背修饰符语义（--u-hidden 不是按钮图标的某种状态），又让类名失去直觉。
统一用 u- 前缀 + 原子化命名
工具类要轻、快、无上下文依赖，命名必须一眼可知作用：
-
u-mt-4表示margin-top: 1rem，不是u-margin-top-large（需查映射表） -
u-flex对应display: flex，不写u-display-flex（冗余） -
u-text-gray-700而非u-text-brand（换主题时不用全局搜替换） - 禁止在工具类里嵌套伪类：
u-btn-hover这种写法无效，hover 状态应由组件自身控制
清除浮动这类布局副作用，别当 block 处理
clearfix 是典型反例：它不渲染内容、无业务语义、必须加在父容器上才能生效。把它当 BEM block（如 clearfix__item）会导致两个硬伤：
- 加在子元素上完全无效 —— 清除浮动必须作用于浮动项的**直接父容器**
- 破坏 BEM 隔离原则 —— 它和 block 内部结构无关，却强行绑定层级
正确做法是定义为全局 u-clearfix 工具类，或封装成 SCSS @mixin clearfix，按需混入。
和 BEM 组件共存时，保留一个锚点类
纯工具类堆砌会让 HTML 难以定位模块，比如 class="u-flex u-items-center u-p-4 u-bg-white u-rounded" 查 DOM 时根本看不出这是哪个业务模块。解决办法很简单：
- 每个区块根节点保留一个 BEM class 作为语义锚点，例如
product-card - 内部用工具类控制样式：
<div class="product-card u-flex u-p-4">...</div> - 这样 DevTools 里搜索
product-card就能快速定位整块，工具类只负责“怎么画”
真正容易被忽略的是：工具类命名一旦定下，就必须全项目收敛。哪怕只有一处写成 mt-4 而不是 u-mt-4，就会埋下冲突和维护债。前缀不是可选项，是作用域防火墙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
