CSS-in-JS真正实现样式隔离，因其将样式绑定组件生命周期并生成唯一哈希类名，从机制上切断全局污染；而BEM和CSS Modules仍存在伪类、全局选择器及Portal脱离上下文等泄漏风险。
现代Web开发推荐引入CSS-in-JS，不是因为它“更时髦”，而是它在组件化场景下能**直接切断样式泄漏路径**——传统CSS的全局性在React/Vue等组件模型中天然不匹配，而CSS-in-JS让样式成为组件的“私有属性”，不靠约定、不靠构建工具hack，从机制上堵死污染源头。
为什么BEM或CSS Modules仍会漏掉样式污染
BEM只是命名规范，.header__title照样会被另一个同名类或更高权重的div.header__title覆盖；CSS Modules虽生成哈希类名，但对body、html、button:focus这类全局/伪类选择器完全无效。比如：
- 一个组件里写了
body { background: #f0f }，卸载后样式还在 - 第三方库的
.ant-btn和你写的.btn在DOM里同时存在，权重相同就按加载顺序决胜负 - Vue的
<style scoped>无法穿透子组件，但子组件若用em或rem继承父级字体设置，依然可能被意外影响
CSS-in-JS如何真正隔离样式作用域
它不依赖类名拼写或构建时重命名，而是把样式注入逻辑绑定到组件生命周期里：
- 每个
styled.button或css`...`调用都生成唯一哈希类名，并只挂载到该组件实例的DOM节点上 - 动态样式（如
color: ${props.active ? 'red' : 'gray'}）在JS层计算，结果直接映射为内联class，不经过CSS文件解析流程 - 像Ant Design 5.0的实现，甚至把哈希与
package.json版本+主题变量绑定，确保同一组件在不同环境渲染出完全一致的class名，避免SSR水合错位
哪些场景下CSS-in-JS反而会加重污染
它不是银弹，滥用会导致新问题：
立即学习“前端免费学习笔记（深入）”；
- 在非组件边界处使用：比如在
index.js根文件里写const GlobalStyle = css`body { ... }`，这和引入global.css没区别 - 过度依赖
!important覆盖第三方样式，本质是放弃隔离，退化成CSS战争 - 服务端渲染时未正确包裹
CacheProvider（Emotion）或StyleSheetManager（styled-components），导致客户端注入重复样式标签 - 用
createGlobalStyle时没限制选择器范围，例如写div { margin: 0 }而非.my-app div
最关键的细节常被忽略：CSS-in-JS的隔离效果高度依赖**组件树的完整性**——如果用ReactDOM.createPortal把弹窗挂到document.body，它就脱离了原组件的样式上下文，必须显式透传theme或用useTheme读取，否则样式会断连。
