用类名前缀限定作用域是最轻量、兼容性最好且易理解的方式，即为组件根元素设唯一类名（如.user-card），所有内部样式均以此为父选择器，避免泛化类名或标签选择器导致的全局污染。
用类名前缀限定组件样式作用域
直接给组件根元素加唯一类名（如 .user-card），所有内部样式都以此为父选择器，是最轻量、兼容性最好、也最容易被团队理解的方式。它不依赖构建工具或框架特性，哪怕纯 HTML 页面也能立刻生效。
常见错误是只写 .header 或 .button 这类泛化类名，结果在其他组件里一模一样的类名被意外命中。更糟的是在组件内写 button { } 或 * { } —— 这些会逃出前缀范围，变成全局污染源。
-
.user-card必须出现在模板根元素上，且不能动态切换（否则样式失效） - 子元素用 BEM 风格：
.user-card__avatar、.user-card--compact - 重置仅限内部：
.user-card * { box-sizing: border-box; }，别写* { } - 慎用
!important：它会让后续覆盖逻辑失控，优先靠层级或命名空间提权
SCSS 嵌套 + @use 管理变量与 Mixin
嵌套本身不解决污染，但配合 @use 可以让组件样式真正“自包含”。关键不是把所有样式塞进一个文件，而是让每个组件 SCSS 文件只依赖明确导入的模块，比如颜色、间距、响应式工具。
比如 user-card.scss 里写：@use "tokens" as t; @use "mixins" as m;，然后用 t.$spacing-md 和 m.responsive-padding()。这样变量和逻辑都来自统一来源，又不会和别的组件共享命名空间。
立即学习“前端免费学习笔记（深入）”；
重要：对 React 或 Next.js 代码的任何更改必须先阅读本技能。Vercel 工程团队的 React 与 Next.js 指南，涵盖可视化...
-
@use后变量必须带命名空间访问，t.$color-primary而非直接$color-primary - 所有局部 SCSS 文件名必须以下划线开头（如
_user-card.scss），否则可能被误编译成独立 CSS - 避免在组件文件里
@import全局 reset —— 它会把* { }注入进来，污染整个页面 - Mixin 应接收参数或读取变量，别硬编码值；否则复用时改一处就得改一堆
Vue/React 中如何安全穿透第三方组件样式
当你的组件用了 Element Plus、Ant Design 这类 UI 库，想微调某个按钮圆角或输入框边框，::v-deep（Vue）或 :global（Vue 3）仍是目前最可控的穿透方式，但它必须严格守规矩，否则白写。
典型翻车点：在 <style lang="scss" scoped></style> 里写 .my-form ::v-deep .el-input__inner，结果失效——因为部分版本的 sass-loader 会丢掉前面的父选择器前缀。
-
::v-deep必须写在顶层，不嵌套，且后面要跟一个空格：::v-deep .el-input__inner - 如果第三方组件用了
teleport（比如<el-dialog>），DOM 已移出当前作用域，::v-deep失效，得改用全局样式或:global(.el-dialog) - 优先查文档看是否支持 SCSS 变量覆盖（如 Element Plus 的
el-variables.scss），那才是主题级修改的正路 - 别用
!important+ 三层 class 拼权重，UI 库升级后 class 名一变就全崩
为什么 CSS Modules 不是万能解药
CSS Modules（如 Card.module.scss）确实能靠哈希类名天然隔离，但它带来的调试成本和协作摩擦常被低估。尤其在跨框架或 SSR 场景下，哈希类名可能不一致，导致服务端渲染出的类名和客户端对不上。
更实际的问题是：当你需要复用某个按钮的视觉风格到另一个组件，却拿不到它的原始类名，只能复制粘贴样式块——这反而破坏了复用初衷。
- CSS Modules 适合中大型 React/Vue 项目，但不适合需频繁手动调试样式的场景
- 哈希类名让 DevTools 里看到的是
Card_root__ABC123，而非语义化的.card-root，排查效率下降 - 若项目同时存在传统 CSS、scoped CSS、CSS Modules，维护者容易混淆边界，比如误以为
.card是模块化类名，其实它是全局的 - 真正难的不是“怎么隔离”，而是“隔离之后怎么合理复用”——这需要设计一套可组合的 token 层，而不是靠工具自动哈希
复杂点不在技术选型，而在边界意识：每个组件的样式入口必须明确知道哪些是它定义的、哪些是继承的、哪些是穿透进来的。一旦某处写了未加前缀的标签选择器或通配符，整条链路就可能泄漏。这不是一次配置能解决的事，而是每次写 CSS 时都要问自己一句：这个声明，到底该属于谁？
