应使用 CSS Modules、CSS-in-JS 或 Shadow DOM 实现样式作用域隔离；CSS Modules 通过哈希类名局部化样式，CSS-in-JS 运行时动态生成唯一 class，Shadow DOM 提供原生强隔离，而 BEM 等命名规范无法防止样式污染。
组件样式如何避免全局污染
直接在组件里写 .btn { color: red; }，很可能影响其他地方同名类。CSS 本身没有天然作用域，必须靠约定或工具机制隔离。
- 不依赖全局类名前缀（如
.my-comp-btn），手动维护易出错、命名冗长 - 优先用 CSS Modules：构建时把
button.module.css中的.primary编译成类似Button_primary__abc123的唯一哈希类名 - Vue / React 组件中启用
scoped或css modules配置后，样式只会作用于当前组件 DOM 节点（含子组件需显式穿透） - 注意：CSS Modules 对
@keyframes、@font-face等规则默认不局部化，需用:global()显式包裹
CSS-in-JS 方案对作用域的控制逻辑
像 styled-components 或 emotion 把样式写在 JS 里，本质是运行时动态生成带哈希的 class 并注入 <style> 标签，天然隔离。
-
styled.button创建的组件自带唯一 class，即使多个组件都叫Button，样式也不会冲突 - 支持插值（
color: ${props => props.theme.color};），但过度嵌套会导致生成大量重复 class，影响复用性 - 服务端渲染（SSR）需确保样式能被提前收集并注入首屏 HTML，否则出现闪动；
emotion需配CacheProvider，styled-components需ServerStyleSheet
Shadow DOM 是唯一真正的样式作用域
Web Components 原生方案，attachShadow({ mode: 'closed' }) 后，内部样式完全无法被外部 CSS 选中，外部样式也无法穿透进来。
- 适合强隔离场景（如第三方嵌入组件、设计系统基础控件）
- React/Vue 默认不使用 Shadow DOM，需手动配置（React 需用
createRoot+shadowRoot；Vue 用defineCustomElement） - 调试困难：DevTools 中 shadow root 默认折叠，样式面板看不到继承链，
::part()和::theme()等新伪类尚未广泛支持 - 不兼容老浏览器（IE 完全不支持，Edge 79+ 才稳定）
为什么不能只靠 BEM 就解决作用域问题
BEM（block__element--modifier）是命名规范，不是作用域机制。它不阻止样式泄漏，只靠人遵守约定。
立即学习“前端免费学习笔记（深入）”；
- 一个团队多人协作时，
.header__title仍可能被另一个组件的.header__title覆盖（尤其是权重相同、顺序靠后） - 无法防止第三方库样式干扰（比如引入了
normalize.css或antd，它们的.btn会污染你的.btn） - 构建工具无法据此做 tree-shaking —— 即使某个 BEM 类在代码里没被引用，只要出现在 CSS 文件里，就会被打包进去
// 示例：CSS Modules 中正确导出与使用
// Button.module.css
.primary {
background: #007bff;
}
.primary:hover {
background: #0056b3;
}
// Button.jsx
import styles from './Button.module.css';
export default function Button() {
return <button className={styles.primary}>Click</button>;
}
真正的作用域隔离必须由构建阶段（CSS Modules）、运行时（CSS-in-JS）或渲染层（Shadow DOM）介入，仅靠命名或人力约定，迟早会在迭代中破防。 
