BEM组件中禁止在HTML内直接使用工具类，因其破坏样式隔离性；工具类仅允许挂载于Block根节点且须前置，推荐用CSS Modules+clsx封装，第三方样式需通过语义化Wrapper Block物理隔离。
工具类直接写在BEM组件HTML里会破坏隔离性
BEM组件的样式边界靠block__element--modifier结构维持，一旦混入text-center、mt-4这类工具类，就等于主动打开全局样式入口——它不声明归属，不绑定block，浏览器匹配时完全无视上下文。
常见错误现象：card__header加了flex后，被另一处flex工具类覆盖；或button--primary的padding被p-2覆盖，但开发者查不到是谁改的。
- 工具类没有作用域概念，
bg-red-500在哪都生效，和card__title完全无关 - 构建产物中工具类通常打包进全局CSS，优先级常高于BEM局部规则（尤其没用
!important时） - VS Code里Ctrl+Click跳转不到定义位置，调试时只能靠DevTools反向追踪
必须用工具类时，只允许挂载在Block根节点上
如果真要引入Tailwind或类似工具链，唯一安全的挂载点是Block根元素本身，且仅限布局类（如flex、grid、max-w-md），绝不能侵入__element或--modifier层级。
例如<div class="card card--featured flex flex-col">可接受，但<h2 class="card__title text-xl font-bold">就是越界。
立即学习“前端免费学习笔记（深入）”；
-
card根节点挂flex：它描述的是整个卡片的布局容器行为，属于block职责 -
card__title挂text-xl：标题字体大小应由card__title自身样式控制，或通过card__title--largemodifier声明 - 所有工具类必须出现在BEM类名之前（
class="flex card card--featured"），避免CSS权重干扰
CSS Modules + clsx是更稳妥的替代方案
比起把工具类硬塞进HTML，用clsx拼接CSS Modules导出的类名，既能复用原子样式逻辑，又不破坏BEM作用域。工具类逻辑被收编进JS层，最终生成的仍是带哈希的card__title_abc123。
示例：clsx(styles['card__title'], styles['card__title--large'])比手拼"card__title text-xl"更可控。
- 禁止在
clsx里混用原始工具类字符串：clsx(styles.card, 'text-center')→text-center逃逸作用域 - 所有工具类逻辑应封装进单独的
utils.module.css，并用:global()显式声明（仅限必要场景） - CI阶段用
stylelint校验：禁止class属性值中出现未声明的工具类名（如text-、mt-前缀）
第三方工具类库必须包裹在Wrapper Block里
当不得不使用富文本编辑器输出的HTML、或接入Ant Design等外部组件时，工具类已不可控。此时唯一解法是用Wrapper Block物理隔离，让它的样式影响止步于wrapper边界。
例如：<div class="rich-text-wrapper"><div class="ql-editor">...</div></div>，再在CSS里写.rich-text-wrapper :global(.ql-editor) { ... }。
-
:global()必须限定最小粒度，:global(.ql-editor p)✅，:global(.ql-editor)❌ - Wrapper Block名必须语义化且唯一（如
legacy-rich-text），不能用泛称container或wrap - 该wrapper不得参与任何BEM嵌套，即
card__body里不能放rich-text-wrapper，否则破坏card__body的职责边界
--modifier），还是跨组件通用布局（抽成独立Block），抑或纯视觉调整（放进utils.module.css）。一旦归因模糊，边界就塌了。 
