全局重置会破坏BEM组件box-sizing预期，因其穿透影响第三方或legacy组件内部依赖content-box的布局逻辑，导致高度错乱且DevTools无法显示被继承覆盖的规则；应改用block级重置或:where(*)降低特异性。
为什么全局重置样式会破坏BEM组件的box-sizing预期
BEM组件依赖一致的盒模型行为，但全局 * { box-sizing: border-box; } 会穿透到所有元素，包括第三方库或 legacy 组件内部——它们可能明确写了 box-sizing: content-box 来适配特定布局逻辑。一旦被覆盖，.card__content 高度计算就错乱，且 DevTools 里根本看不到被划掉的规则（因为没被覆盖，只是被继承了）。
实操建议：
- 删掉全局
*重置，改用 BEM block 级重置：.card { box-sizing: border-box; }、.form-field { box-sizing: border-box; } - 若必须保留全局 reset，用
:where()降低特异性：:where(*) { box-sizing: border-box; }，这样不会干扰.el-input__inner这类高优先级选择器 - 检查第三方组件文档，比如 Element Plus 明确要求
html { box-sizing: border-box; }，那就只在html上设，不碰*
CSS Modules 中 composes 为什么会悄悄绕过 BEM 边界
composes 是 CSS Modules 提供的复用机制，但它把不同文件的 class 名拼在一起，等于在运行时“跨块”合并样式。比如 button.module.css 里 .primary { composes: base from "./base.module.css"; }，结果生成的类名是 Button_primary__x1a2b，但 base 可能来自 layout.module.css ——这直接打破了 BEM “block 是语义边界”的前提。
常见错误现象：调试时发现 .button__icon 的 margin 被莫名重置，追查发现是 composes 引入的 layout__spacing 规则漏进了 button 作用域。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 禁用
composes，改用显式 className 拼接：className={`${styles.button} ${layoutStyles.spacingSmall}`} - 如果真要复用，把基础样式抽成独立的 utility class 文件，并用
:global()包裹，明确标出“这不是 BEM block” - 在构建阶段加 Stylelint 规则：
stylelint-selector-bem-pattern配合ignore: ["composes"]白名单，避免误报但保留对主体结构的校验
第三方组件库的 class 名该不该加 BEM 前缀
不该。硬加前缀如 myapp-el-button 不仅无效，还会让 .el-button.is-disabled .el-button__icon 这类内部关系选择器全部失效——因为库的 JS 逻辑和 CSS 是配套的，你改 HTML class 却没改 JS 插入逻辑。
真正起效的方式是用 wrapper block 切断影响范围：
- 在 Vue/React 中包一层：
<div class="form-field--date"><ElDatePicker /></div> - CSS 中只写：
.form-field--date :deep(.el-input__inner) { padding: 8px 12px; }（Vue）或.form-field--date[data-v-xxx] .el-input__inner（手动加属性选择器） - 绝对不要写
.myapp-el-button { ... }或试图用 PostCSS 自动加前缀去处理第三方类名——它会污染整个库的样式链
多个 CSS 文件加载顺序混乱时，怎么快速定位谁覆盖了谁
不是看文件引入顺序，而是看浏览器实际解析后的规则优先级。常见陷阱是：你改了 Button.module.css，但页面没变，其实是 LegacyTheme.css 里一条 .button { color: red !important; } 挡住了——而这条规则在源码里藏在 200 行注释后面，根本想不到。
实操建议：
- 打开 DevTools → Elements → 选中元素 → Styles 面板，逐个点开每条规则，看哪些是灰色带
invalid，鼠标悬停提示“!importantoverridden”或“lower specificity” - 用命令行快速过滤：
document.styleSheets.forEach(s => s.cssRules && console.log(s.href, s.cssRules.length))，确认是否漏载或重复载入 - 在构建阶段加 Webpack 插件
webpack-bundle-analyzer，检查 CSS 文件体积和重复引入情况，比肉眼翻index.html可靠得多
BEM 的隔离能力只在线性命名上生效，一旦遇到运行时注入、JS 动态 class、或第三方库的 shadow DOM 内部样式，就得立刻切到 wrapper 层或 :deep() 这类机制——别指望一个命名规范能兜住所有场景。
