全局样式应限定作用域以避免覆盖组件样式，如用#app包裹；CSS Modules需配置localIdentName防类名冲突；第三方库样式优先使用其定制机制；Tailwind需在content中显式声明动态类名。
全局样式引入后局部组件样式被意外覆盖
CSS 全局样式（比如 reset.css 或 normalize.css）一加，某些 React/Vue 组件的默认边距、字体大小就变了，甚至按钮点击态消失——不是组件写错了，是全局规则太“热心”。
- 根本原因是：全局 CSS 里用了低特异性但高影响范围的选择器，例如
button { padding: 0; }或* { box-sizing: border-box; }，它会穿透到所有组件内部 - Vue 的
<style scoped></style>和 React 的 CSS Modules 能挡一部分，但挡不住!important、伪元素（::before）、继承属性（color、font-family）和通配符规则 - 真正安全的做法不是禁用全局样式，而是给它划边界：把重置/基础样式只作用于根容器，比如用
#app或.root-layout包一层，再写#app button { ... }
CSS Modules 中 class 名冲突仍发生
明明用了 import styles from './Button.module.css'，结果两个不同组件的 styles.primary 渲染出同一个哈希类名，点一个按钮，另一个也变色。
- 常见于 Webpack 配置中
css-loader的localIdentName没设好，默认可能只含[hash:6]，短哈希碰撞概率不低 - 更稳妥的是加上路径和文件名信息：
[name]_[local]_[hash:6]，确保Button.module.css的.primary和Modal.module.css的.primary生成不同类名 - 注意：如果项目用了
css-loaderv6+，还要检查是否启用了exportLocalsConvention: "camelCase"，否则styles.my-class会变成undefined
第三方 UI 库样式与自定义样式打架
引入 antd 或 element-plus 后，自己写的 .card { border-radius: 8px; } 在某些页面完全不生效，审查元素发现被库的 .ant-card 规则盖掉了。
- 这不是优先级问题，而是作用域问题：UI 库样式通常走全局注入，而你的
.card可能只在某个组件 scope 内，根本没机会参与层叠 - 别硬加
!important，先确认你写的样式是否真的被加载了（检查 Network 面板有没有 404 的 CSS 文件） - 推荐做法：用库提供的定制机制，比如 antd 的
theme配置或ConfigProvider，或者用 CSS-in-JS 工具（如styled-components）包住组件，强制隔离 - 特别注意：某些库（如早期版本的
vant）会把图标字体路径写死为相对路径，一旦你改了public目录结构，图标就变成方块——得配publicPath或改用 CDN
tailwind.config.js 里 content 配置漏掉动态类名
Tailwind 打包后发现 bg-[#1a2b3c] 或 text-${status}-500 这类动态生成的 class 消失了，控制台也没报错，就是不生效。
立即学习“前端免费学习笔记（深入）”；
- Tailwind 是按需生成 CSS，
content字段指定哪些文件里“可能出现 class”，它不会运行 JS，所以class={`${prefix}-500`}这种拼接会被忽略 - 必须显式列出所有可能的值：比如状态色有
success、warning、error，就得在content里加'./src/**/*.{js,ts,jsx,tsx}'，并确保这些字符串字面量出现在源码中（哪怕只是注释） - 更稳的方式是提前定义好工具类，比如在
tailwind.config.js的theme.extend.colors里加status: { success: '#10b981', warning: '#f59e0b' }，然后用text-status-success
样式污染的本质不是“写了太多 CSS”，而是“没想清楚哪条规则该在哪个上下文里起效”。越想靠命名空间或工具自动解决，越容易在 runtime 掉链子。手动划界、显式声明、留痕验证，比依赖抽象层更可靠。
