CSS全局样式与局部样式的引入平衡_避免样式污染

全局样式应限定作用域以避免覆盖组件样式，如用#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-loader v6+，还要检查是否启用了 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 掉链子。手动划界、显式声明、留痕验证，比依赖抽象层更可靠。