如何用SCSS拆分组件级 CSS并避免样式污染？

用类名前缀限定作用域是最轻量、兼容性最好且易理解的方式，即为组件根元素设唯一类名（如.user-card），所有内部样式均以此为父选择器，避免泛化类名或标签选择器导致的全局污染。

用类名前缀限定组件样式作用域

直接给组件根元素加唯一类名（如 .user-card），所有内部样式都以此为父选择器，是最轻量、兼容性最好、也最容易被团队理解的方式。它不依赖构建工具或框架特性，哪怕纯 HTML 页面也能立刻生效。

常见错误是只写 .header 或 .button 这类泛化类名，结果在其他组件里一模一样的类名被意外命中。更糟的是在组件内写 button { } 或 * { } —— 这些会逃出前缀范围，变成全局污染源。

1. .user-card 必须出现在模板根元素上，且不能动态切换（否则样式失效）
2. 子元素用 BEM 风格： .user-card__avatar、.user-card--compact
3. 重置仅限内部：.user-card * { box-sizing: border-box; }，别写 * { }
4. 慎用 !important：它会让后续覆盖逻辑失控，优先靠层级或命名空间提权

SCSS 嵌套 + @use 管理变量与 Mixin

嵌套本身不解决污染，但配合 @use 可以让组件样式真正“自包含”。关键不是把所有样式塞进一个文件，而是让每个组件 SCSS 文件只依赖明确导入的模块，比如颜色、间距、响应式工具。

比如 user-card.scss 里写：@use "tokens" as t; @use "mixins" as m;，然后用 t.$spacing-md 和 m.responsive-padding()。这样变量和逻辑都来自统一来源，又不会和别的组件共享命名空间。

1. @use 后变量必须带命名空间访问，t.$color-primary 而非直接 $color-primary
2. 所有局部 SCSS 文件名必须以下划线开头（如 _user-card.scss），否则可能被误编译成独立 CSS
3. 避免在组件文件里 @import 全局 reset —— 它会把 * { } 注入进来，污染整个页面
4. Mixin 应接收参数或读取变量，别硬编码值；否则复用时改一处就得改一堆

Vue/React 中如何安全穿透第三方组件样式

当你的组件用了 Element Plus、Ant Design 这类 UI 库，想微调某个按钮圆角或输入框边框，::v-deep（Vue）或 :global（Vue 3）仍是目前最可控的穿透方式，但它必须严格守规矩，否则白写。

典型翻车点：在 里写 .my-form ::v-deep .el-input__inner，结果失效——因为部分版本的 sass-loader 会丢掉前面的父选择器前缀。

1. ::v-deep 必须写在顶层，不嵌套，且后面要跟一个空格：::v-deep .el-input__inner
2. 如果第三方组件用了 teleport（比如 <el-dialog>），DOM 已移出当前作用域，::v-deep 失效，得改用全局样式或 :global(.el-dialog)
3. 优先查文档看是否支持 SCSS 变量覆盖（如 Element Plus 的 el-variables.scss），那才是主题级修改的正路
4. 别用 !important + 三层 class 拼权重，UI 库升级后 class 名一变就全崩

为什么 CSS Modules 不是万能解药

CSS Modules（如 Card.module.scss）确实能靠哈希类名天然隔离，但它带来的调试成本和协作摩擦常被低估。尤其在跨框架或 SSR 场景下，哈希类名可能不一致，导致服务端渲染出的类名和客户端对不上。

更实际的问题是：当你需要复用某个按钮的视觉风格到另一个组件，却拿不到它的原始类名，只能复制粘贴样式块——这反而破坏了复用初衷。

1. CSS Modules 适合中大型 React/Vue 项目，但不适合需频繁手动调试样式的场景
2. 哈希类名让 DevTools 里看到的是 Card_root__ABC123，而非语义化的 .card-root，排查效率下降
3. 若项目同时存在传统 CSS、scoped CSS、CSS Modules，维护者容易混淆边界，比如误以为 .card 是模块化类名，其实它是全局的
4. 真正难的不是“怎么隔离”，而是“隔离之后怎么合理复用”——这需要设计一套可组合的 token 层，而不是靠工具自动哈希

复杂点不在技术选型，而在边界意识：每个组件的样式入口必须明确知道哪些是它定义的、哪些是继承的、哪些是穿透进来的。一旦某处写了未加前缀的标签选择器或通配符，整条链路就可能泄漏。这不是一次配置能解决的事，而是每次写 CSS 时都要问自己一句：这个声明，到底该属于谁？