CSS in JS 与方案选型
CSS in JS（styled-components、emotion）把样式写进 JS：以组件为单位，样式天然局部、可复用、可读 props 动态变化，彻底告别命名与覆盖问题。它是组件化框架（React）生态的自然产物。
缺点也明显：运行时有性能开销（产物变大）、样式与逻辑耦合、SSR 需要额外处理。近两年零运行时方案（如 vanilla-extract、Linaria）把 CSS in JS 编译成静态 CSS，兼得两者优点。
- 优点：局部作用域、随 props 动态变化、跟组件走，删除组件即删除样式
- 缺点：运行时方案有性能成本， unlink 样式与组件耦合，调试看到的是哈希类名
- 选型口诀：Vue/传统项目用 Sass 或 Modules；React 中后台可 styled；追性能用零运行时方案
React
// styled-components 写法（React） import styled from 'styled-components'; // 样式跟着组件走，props 直接驱动样式 const Button = styled.button\` padding: 8px 16px; border-radius: 6px; border: none; background: \${props => props.primary ? '#a371f7' : '#e5e7eb'}; color: \${props => props.primary ? '#fff' : '#333'}; cursor: pointer; &:hover { opacity: 0.85; } \`; // 使用：<Button primary>主要按钮</Button> // <Button>次要按钮</Button> // 对比同功能的 Sass Modules：需要 .scss 文件 + class 拼接 // 选型没有银弹：看框架、看团队、看是否需要动态样式
本节要点CSS in JS 样式随组件、可动态，但有运行时成本；零运行时方案是进化方向。
