根本原因是工具类定义早、选择器高权且全局，而bem类后加载、单类名、无嵌套；浏览器按层叠顺序与权重判定，导致.text-lg等覆盖.user-card__title。
全局工具类为什么总盖过 BEM 组件样式
根本原因不是权重不够，而是工具类（如 text-lg、flex、mt-4）通常定义在 CSS 文件靠前位置，且用高 specificity 选择器（比如 [class*="text-"] 或直接 .text-lg），而 BEM 类（如 user-card__title）往往后加载、单类名、无嵌套——浏览器按层叠顺序+权重判定，.text-lg 就赢了。
常见错误现象：user-card__title 设了 font-size: 18px，但页面显示是 16px；DevTools 里看到 .text-base 被划掉，而 .text-lg 生效——说明它来自 Tailwind 或自建工具集，且注入早于组件样式。
- 不要指望靠加
!important去“反杀”，这会让后续所有 modifier（如user-card__title--large）失效 - Tailwind 默认不启用
prefix时，.flex和第三方库的.flex（如 Bootstrap）会互相覆盖 - Vue 的
<style scoped></style>对挂到body下的弹窗无效，工具类仍能穿透进来
如何让 BEM 组件稳稳压住工具类
关键不是堆权重，而是控制“谁先声明、谁更具体、谁可预测”。BEM 类必须拥有明确上下文和最小必要 specificity。
- 禁止写
.user-card .user-card__title—— 这等于主动放弃 BEM 的扁平优势，还引入 DOM 结构耦合 - 改用组合类名强化语义优先级：
user-card__title user-card__title--heading，再在 CSS 中写.user-card__title--heading { font-size: 20px !important; }（仅限此场景，非通用方案） - 在构建时给工具类加前缀：Tailwind 配置
prefix: 'tw-'，让text-lg变成tw-text-lg，彻底避开业务类名空间 - Webpack/Vite 中，确保组件 CSS（含 BEM）的
import语句在工具类之后，例如：import 'tailwind.css'<br>import './UserCard.module.css'
CSS Modules 下怎么安全混用工具类和 BEM
当用 .module.css 时，BEM 类自动哈希（如 user-card__title → UserCard_title__abc123），但工具类仍是全局裸名——它们天然不在同一作用域，也就谈不上“冲突”，只是渲染时被同时应用。
- 工具类必须显式写进
className：不能只靠 BEM 类触发，得手动拼{styles['user-card__title']} text-lg - 若需局部覆盖工具类行为（比如让
user-card__title忽略tw-text-sm），只能用:global(.tw-text-sm)在模块内重置：:global(.tw-text-sm) {<br> font-size: inherit !important;<br>} - 避免在
:global()里写宽泛选择器（如:global(*)），它会污染整个文档，破坏模块隔离初衷 - React 中推荐用
clsx管理混合类名：clsx(styles['user-card__title'], 'tw-font-bold', isLarge && 'tw-text-xl')
微前端或跨团队项目里最易忽略的点
多个子应用共用同一份工具类 CSS（如统一设计系统提供的 ds-utils.css），但各自 BEM 块名未做物理隔离，header__logo 在 A 应用是 24px，在 B 应用是 16px，打包合并后后者必然覆盖前者——命名再规范也无用。
- 微前端场景下，BEM 的
block名必须动态注入子应用标识，例如从window.__MICRO_APP_NAME__拼出sales-header__logo - 禁止把工具类 CSS 当作“基础层”全量 import 到每个子应用入口；应由主应用统一提供，并通过 CSSOM 动态插入，确保唯一实例
- 构建时开启
css-loader?modules并配exportLocalsConvention: 'camelCaseOnly'，防止哈希类名大小写问题导致 JS 拿不到styles键 - 真正难调试的不是样式不生效，而是生效了但来源不可追溯——务必在 DevTools 的 Styles 面板里点开每条规则，确认它来自哪个文件、是否被
:global()逃逸、是否命中了哈希后的类名
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
