优先选bem或css modules+bem，因styled components依赖js运行时注入样式，在ssr、微前端、邮件模板等场景易失效；bem无环境限制，css modules解决全局冲突，bem补足语义，二者叠加最佳。
用 BEM 还是 Styled Components？先看你的构建链路是否支持运行时注入
Styled Components 依赖 JS 运行时动态生成 <style></style> 标签并插入 DOM，如果项目用的是纯静态 HTML、服务端直出（如 Nuxt SSR 默认配置）、或构建后禁止 JS 执行的环境（如某些邮件模板渲染器），styled.button 会直接 fallback 成无样式的原生元素。BEM 没这问题——它只是类名约定，最终输出的仍是标准 CSS 文件，任何环境都能加载。
常见错误现象：Warning: Prop `className` did not match. 出现在 SSR 场景下，本质就是服务端渲染的类名哈希与客户端不一致，而 Styled Components 默认不开启 SSR 支持；BEM 在 Webpack/Vite 中配合 css-loader?modules 同样有哈希，但可通过 localIdentName 配置固定格式（如 [path][name]__[local]）规避 mismatch。
- SSR 项目：优先验证
styled-components的ServerStyleSheet是否已正确包裹入口，否则直接切到 CSS Modules + BEM 风格命名 - 微前端子应用：若主框架禁用动态
<style></style>注入（如 qiankun 的 strictStyleIsolation），Styled Components 需配合StyleSheetManager指定容器，否则样式丢失 - 邮件模板/CSP 严格策略：BEM 或内联
style属性更稳妥，styled-components的css函数生成的字符串无法绕过 CSPstyle-src 'unsafe-inline'限制
CSS Modules + BEM 命名是否多余？其实它解决的是两个不同维度的问题
BEM 是人为约定的命名结构（.card__header--large），CSS Modules 是构建时自动加哈希（Card_card__header--large_abc123）。两者不是互斥关系，而是叠加使用：CSS Modules 解决“全局冲突”，BEM 解决“语义混乱”。
比如你写 .button，CSS Modules 能保证它不和另一个 .button 冲突，但无法告诉你这个 button 是主操作按钮、危险操作按钮还是禁用态——BEM 的 .button--primary、.button--danger、.button--disabled 就补上了这层语义。
- 不推荐只用 CSS Modules 而放弃 BEM：类名如
styles.primary、styles.danger缺乏上下文，团队协作时难以理解其作用域边界 - 也不推荐只用 BEM 不用 CSS Modules：一旦两个组件都定义了
.card__body，依然会冲突，尤其在跨团队协作或引入第三方 UI 库时 - 最佳实践：在
.module.css文件里写 BEM 式类名，再由 CSS Modules 处理作用域——既保语义，又防污染
Styled Components 的动态样式真比 class 切换快？别被直觉骗了
很多人以为 styled.button`background: ${props => props.primary ? '#409EFF' : '#fff'};` 比手写 className={clsx(styles.button, props.primary && styles.primary)} 更“响应”，其实两者性能差异微乎其微。真正影响渲染性能的是样式计算本身，而不是怎么传进去。
关键区别在于维护成本：Styled Components 把逻辑和样式耦合在一处，适合状态驱动强的组件（如带 loading 动画的按钮）；而 CSS Modules + class 切换更适合需要复用基础样式、且状态组合较多的场景（如一个表格单元格要同时处理 isHovered、isEditable、hasError 三重条件）。
- 动态样式复杂度高（>3 个条件分支）：CSS Modules 的
composes或 Sass@mixin更易拆分和测试 - 样式需被非 React 环境消费（如设计系统文档站、Storybook 的静态导出）：Styled Components 生成的样式无法脱离 JS 运行时，而 CSS Modules 输出的是真实 CSS 文件
- 主题切换频繁：Styled Components 的
ThemeProvider确实方便，但 CSS Modules 配合 CSS Custom Properties（var(--primary-color)）也能实现零 JS 主题切换，且兼容性更好
别忽略调试体验——class 名能搜，JS 字符串不能
线上遇到样式异常，最快速的排查方式是打开 DevTools，选中元素，看 class 名，然后在项目里全局搜索该类名。CSS Modules 生成的哈希类名（如 Button_button__abc123）虽然难读，但至少能搜到定义位置；Styled Components 生成的类名（如 sc-bdVaJa ciqOoL）是随机字符串，无法反向定位到源码。
这意味着：当某个按钮颜色不对，你用 DevTools 看到的是 sc-fzoLsD fDvEgX，除非开 sourcemap 并启用 displayName 配置，否则根本不知道它对应哪个组件文件里的哪段模板字符串。
- 强制开启
displayName：在 Webpack/Vite 配置中为babel-plugin-styled-components设置displayName: true，让生成的类名带上组件名前缀（如Button-sc-fzoLsD fDvEgX） - 避免嵌套过深的 styled 组件：如
const Wrapper = styled.div; const Inner = styled(Wrapper)，会导致类名链式增长，调试时更难追溯 - 第三方库样式覆盖困难：用
styled(El)包裹 Ant Design 组件时，内部子元素的 class 名不可控，想覆盖其.ant-btn样式只能靠&或提升选择器权重，不如直接在 CSS Modules 里用:global(.ant-btn)清晰
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
