CSS-in-JS 和传统 CSS，我该选哪个？React 新手避坑指南

大家好！我是一个从中文系转行做前端的“野生程序员”。当初学 React 的时候，光是样式怎么写就把我绕晕了——CSS 文件、内联样式、CSS Modules、Styled Components……各种方案看得我眼花缭乱。更糟的是，面试官还爱问：“你用过 CSS-in-JS 吗？”结果我支支吾吾答不上来，差点错失一份心仪的工作。

今天这篇教程，就是为像我当年那样完全零基础、正在学 React、也想顺利求职的你写的。我会用最直白的语言，带你搞懂 传统 CSS 和 CSS-in-JS 到底有什么区别，什么时候该用哪种，还会手把手带你写两个小 demo。放心，不讲术语堆砌，只讲实用！

---

一、先搞清楚：样式到底有几种写法？

在 React 项目里，写样式主要有三种主流方式：

1. 传统 CSS（.css 文件 + className）
2. CSS Modules（带作用域的 .module.css）
3. CSS-in-JS（比如 Styled Components、Emotion）

我们这篇重点对比 传统 CSS 和 CSS-in-JS，因为它们代表了两种完全不同的思想。

💡 小知识：CSS-in-JS 不是一种具体工具，而是一类技术的统称——把 CSS 写在 JavaScript 里。

---

二、环境准备：5 分钟搭好 React 开发环境

我们用 Vite 创建一个超快的 React 项目（比 Create React App 快得多）：

npm create vite@latest my-style-demo -- --template react
cd my-style-demo
npm install
npm run dev

打开 http://localhost:5173，看到 React 的欢迎页就说明成功了！

接下来我们要分别尝试两种样式方案，所以先别急着删 App.jsx。

---

三、传统 CSS：最熟悉的“老朋友”

✅ 是什么？

就是你学 HTML 时写的那种 .css 文件，通过 className 挂到组件上。

🛠 实战：用传统 CSS 写一个按钮

1. 在 src 目录下新建 ButtonTraditional.jsx
2. 创建配套的 ButtonTraditional.css

ButtonTraditional.css

.primary-btn {
  background-color: #3b82f6;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.primary-btn:hover {
  background-color: #2563eb;
}

ButtonTraditional.jsx

import './ButtonTraditional.css';

export default function ButtonTraditional() {
  return (
    <button className="primary-btn">
      传统 CSS 按钮
    </button>
  );
}

在 App.jsx 中使用：

import ButtonTraditional from './ButtonTraditional';

function App() {
  return (
    <div>
      <ButtonTraditional />
    </div>
  );
}

✅ 成功！但注意：如果另一个组件也用了 .primary-btn，样式会冲突！这就是传统 CSS 的最大痛点：全局污染。

---

四、CSS-in-JS：把样式写进 JavaScript

✅ 是什么？

直接在 JS/JSX 文件里定义样式，每个组件的样式自动隔离，不会互相干扰。

最流行的库是 Styled Components，我们来试试。

🛠 安装依赖

npm install styled-components

🛠 实战：用 Styled Components 写同一个按钮

新建 ButtonStyled.jsx：

import styled from 'styled-components';

// 用 styled.button 创建一个带样式的按钮组件
const PrimaryBtn = styled.button`
  background-color: #3b82f6;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    background-color: #2563eb;
  }
`;

export default function ButtonStyled() {
  return <PrimaryBtn>Styled Components 按钮</PrimaryBtn>;
}

在 App.jsx 中使用：

import ButtonTraditional from './ButtonTraditional';
import ButtonStyled from './ButtonStyled';

function App() {
  return (
    <div>
      <ButtonTraditional />
      <ButtonStyled />
    </div>
  );
}

看！不用写 class 名，也不用担心名字重复。每个 PrimaryBtn 都是独立的！

🔍 我当初学的时候最惊讶的是：:hover 这种伪类直接写在模板字符串里就行，连语法都不用改！

---

五、关键对比：一张表说清区别

对比项	传统 CSS	CSS-in-JS（如 Styled Components）
作用域	全局（容易冲突）	自动局部作用域（天然隔离）
动态样式	需要切换 class 或用内联 style	直接传 props 控制样式
代码组织	样式和逻辑分离	样式紧贴组件，高内聚
性能	静态文件，缓存友好	运行时生成 CSS，略重
学习成本	几乎为零（你会 CSS 就行）	需学新 API（但很简单）
求职热度	所有公司都用	大厂/新项目偏爱（如 Airbnb、Netflix）

---

六、动态样式实战：让按钮颜色可配置

这是 CSS-in-JS 的杀手级功能！

传统 CSS 怎么做？

你得提前写好几个 class：

.btn-blue { background: blue; }
.btn-red { background: red; }

然后根据状态切换 className，很麻烦。

Styled Components 怎么做？

直接传 props！

const DynamicBtn = styled.button`
  background-color: ${props => props.bgColor || '#3b82f6'};
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
`;

// 使用
<DynamicBtn bgColor="green">绿色按钮</DynamicBtn>
<DynamicBtn bgColor="purple">紫色按钮</DynamicBtn>

是不是清爽多了？逻辑和样式真正融为一体。

---

七、新手常见问题解答

❓Q1：CSS-in-JS 会让项目变慢吗？

A：现代方案（如 Emotion）做了优化，实际影响微乎其微。除非是超大型应用，否则别担心。

❓Q2：我该现在就学 CSS-in-JS 吗？

A：如果你目标是求职，建议掌握至少一种（推荐 Styled Components 或 Emotion）。很多 React 岗位 JD 明确写“熟悉 CSS-in-JS”。

❓Q3：传统 CSS 完全不能用了吗？

A：当然不是！很多团队仍用 CSS Modules（传统 CSS 的升级版），它通过自动加 hash 解决命名冲突。比如：

import styles from './Button.module.css';
// 使用：className={styles.primaryBtn}

❓Q4：内联样式（style={{}}）算 CSS-in-JS 吗？

A：不算！内联样式无法写伪类（:hover）、媒体查询，能力有限。CSS-in-JS 是完整解决方案。

---

八、我的学习建议 & 避坑指南

作为过来人，给你几点真心话：

1. 先掌握传统 CSS：它是根基。不懂盒模型、Flex、BFC，用啥方案都白搭。
2. 再学 CSS Modules：它是传统 CSS 到 CSS-in-JS 的平滑过渡。
3. 最后上手 CSS-in-JS：从 Styled Components 开始，API 极简，一天就能上手。
4. 别死磕一种：工作中可能用任意方案。理解思想比记住语法重要。
5. 面试准备重点：
   • 能说清两者优缺点
   • 能手写简单 Styled Components 组件
   • 知道“为什么需要 CSS-in-JS”（解决全局污染、支持动态样式）

🚫 避坑：不要一上来就学 Tailwind CSS！它和本文讨论的不是同一维度的问题（Tailwind 是原子化 CSS，可以和传统/CSS-in-JS 混用）。

---

九、下一步该学什么？

完成这个小 demo 后，你可以：

• ✅ 尝试用 Emotion（另一个流行 CSS-in-JS 库）
• ✅ 学习 CSS Modules 并和传统 CSS 对比
• ✅ 在真实项目（比如 TodoList）中同时使用两种方案，体会差异
• ✅ 阅读 Styled Components 官方文档（英文不难，例子很清晰）

记住：工具只是手段，解决问题才是目的。无论用哪种方案，能写出可维护、高性能、易协作的样式代码，你就是合格的前端工程师。

---

希望这篇教程能帮你少走弯路。我当初要是有人这么讲给我听，估计能省下两周查文档的时间！如果你觉得有用，不妨动手敲一遍代码——编程这事儿，光看不练假把式。

祝你学得顺利，早日拿到 offer！🚀