一、CSS Modules
📌 是什么？
CSS Modules 是一种 CSS 文件模块化方案，它通过 局部作用域（local scope） 的方式来避免 CSS 类名冲突。
✅ 特点：
- 每个 CSS 文件只作用于引入它的组件（局部作用域）。
- 写法仍然是标准的 CSS。
- 与 React、Vue 等框架集成良好。
- 支持使用 CSS 预处理器（如 Sass、Less）。
📁 示例：
jsx
// Button.module.css
.button {
background: blue;
color: white;
padding: 10px;
}
// Button.jsx
import styles from './Button.module.css';
function Button() {
return <button className={styles.button}>Click me</button>;
}
⚙️ 优点：
- 保持 CSS 原生写法，学习成本低。
- 避免全局样式污染。
- 构建工具（如 Webpack、Vite）原生支持。
❌ 缺点：
- 不支持动态样式（除非配合 JS 逻辑）。
- 类名需要手动绑定，维护略显繁琐。
二、CSS-in-JS
📌 是什么？
CSS-in-JS 是一种将 CSS 样式写在 JavaScript 中的方案，通常通过库（如 styled-components、emotion）实现。
✅ 特点：
- 样式定义在 JS 中，可以动态生成。
- 支持组件化、作用域隔离、主题等高级功能。
- 与 React 生态高度融合。
📁 示例（以 styled-components 为例）：
jsx
import styled from 'styled-components';
const Button = styled.button`
background: ${props => props.primary ? 'blue' : 'gray'};
color: white;
padding: 10px;
`;
function App() {
return <Button primary>Primary Button</Button>;
}
⚙️ 优点：
- 样式可动态生成，高度灵活。
- 组件化强，与 React 高度契合。
- 组件隔离，自动处理 CSS 作用域和冲突。
- 无需.css文件，纯JS环境。
❌ 缺点：
- 学习曲线略高（需要了解库 API）。
- 依赖 JavaScript 运行时，可能影响性能和 SEO。
- css 无法被浏览器缓存
- 类名不直观，调试稍复杂。
三、Tailwind CSS
📌 是什么？
Tailwind CSS 是一个 原子化(atom)+功能化(utility first) 实用优先的 CSS 框架，它不提供预设的组件样式，而是 提供大量细粒度的类名 供开发者组合使用。
✅ 特点：
- 所有样式通过类名控制，无需写额外 CSS。
- 可高度定制，支持响应式、暗黑模式等。
- 构建时自动移除未使用的 CSS（通过 PostCSS + PurgeCSS）。
📁 示例：
jsx
<button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
Click me
</button>
⚙️ 优点：
- 开发效率高，无需写 CSS 文件。
- 一致性好，适合设计系统。
- 支持按需加载，最终 CSS 体积小。
❌ 缺点：
- 类名长，HTML 结构复杂。
- 初学者需要适应“utility-first”的写法。
- 语义性差（类名本身不表达语义）。
四、对比总结表
| 功能/特性 | CSS Modules | CSS-in-JS | Tailwind CSS |
|---|---|---|---|
| 是否模块化 | ✅ 是（文件作用域） | ✅ 是（组件级） | ❌ 否（全局类名） |
| 是否支持动态样式 | ❌ 否（需 JS 配合） | ✅ 是（原生支持） | ✅ 是（需 JS 控制） |
| 是否需要写 CSS 文件 | ✅ 是 | ❌ 否 | ✅ 是（配置文件） |
| 是否支持主题系统 | ❌ 否 | ✅ 是 | ✅ 是 |
| 是否影响构建性能 | ⚠️ 一般 | ⚠️ 略高 | ✅ 构建优化好 |
| 是否影响 SEO / SSR | ✅ 是 | ⚠️ 依赖库实现 | ✅ 是 |
| 学习成本 | ✅ 低 | ✅ 中等 | ⚠️ 中等偏高 |
| 适合场景 | 中大型项目、传统 CSS 管理 | 动态 UI、组件库 | 快速 UI 开发、设计系统 |
