bem与utility类可共存，但须严守边界：utility仅限block容器层用于布局/响应式控制，禁用在element/modifier上，否则破坏语义隔离；需工具链拦截违规组合。
全局辅助类（如 mt-4、text-center）和 BEM 不是互斥关系，但混用时若不设边界，会快速瓦解 BEM 的语义隔离目标——类名不再自带归属，text-center 到底作用于哪个块？没人能从名字推断。
为什么不能直接在 BEM 组件里塞 Utility 类
常见错误现象：class="user-card__title text-lg font-bold text-center"。问题不在“用了”，而在“没约束”：
- text-center 是无上下文的全局声明，它可能意外覆盖 user-card__title 自身定义的 text-align；
- 后续想改所有标题居中逻辑，得全局搜索 text-center，却无法区分哪些属于排版规范、哪些是临时补丁；
- 审查元素时看到一堆 utility 类，根本看不出这个标题到底属于哪个业务模块。
Utility 类该放在哪一层：只允许在 Block 容器上使用
Utility 类唯一安全的落点，是 Block 级容器本身，且仅用于布局定位、响应式断点或主题开关等“非语义性”控制：
- ✅ 允许：class="dashboard grid grid-cols-12 gap-4 p-6" —— 这些描述的是容器级网格结构，不侵入内部元素语义；
- ✅ 允许：class="product-list md:grid-cols-3 lg:grid-cols-4" —— 响应式列数切换，不影响 product-list__item 的定义；
- ❌ 禁止：class="product-list__item flex items-center" —— 元素级布局应由 BEM 内部样式控制，否则 product-list__item 就不再是可复用单元；
- ❌ 禁止：class="header__logo w-8 h-8" —— 图标尺寸属于组件自身视觉契约，应写在 header__logo 规则里。
如何让 Utility 和 BEM 共存而不打架
关键不是禁用，而是划清责任线：
- 所有 utility 类必须来自独立的原子化 CSS 文件（如 Tailwind 的 @layer utilities），且禁止在 SCSS 中用 @extend 或 @include 复制 utility 逻辑；
- BEM 文件里绝不出现 margin、display、text-align 等布局/排版属性，这些全交给 utility 层；
- 如果某个 Block 内部元素需要统一间距（比如 user-card__content 下所有子元素垂直间距一致），定义一个 BEM 修饰符：user-card__content--spaced，并在其规则里用 gap 或 margin 实现 —— 这样语义仍在 block 内；
- 工具链拦截：用 stylelint-selector-bem-pattern 配合自定义规则，报错任何在 __ 或 -- 类名后紧跟 utility 类的组合（如 card__body mt-4）。
BEM 的脆弱点从来不在命名长度，而在于一旦放开 utility 的使用粒度，人就会本能地抄近路——用 flex 替代 card__header--flex，用 hidden 替代 nav--collapsed。这种“省事”会在三个月后变成查不到来源的样式幽灵。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
