CSS-in-JS vs 传统CSS：现代样式方案选择指南（零基础入门教程）

大家好，我是你们的老朋友小码哥！在大厂做了3年前端开发，业余时间也在B站分享技术干货。今天这篇教程的灵感来源于我最近收到的一条私信：“老师，我在学 React，看到有人说用 CSS-in-JS，有人说用传统 CSS，到底该选哪个？”

我当初学的时候也特别懵——明明写网页不就是写 CSS 文件嘛，怎么突然冒出一堆新名词？别急，今天我就手把手带你搞懂这个“样式之争”，还会用一个超简单的实战项目，让你亲身体验两种方式的区别！

---

一、什么是 CSS-in-JS？它和传统 CSS 有啥区别？

先说结论：它们都是用来给网页“化妆”的工具，目标完全一样——让页面好看。但“化妆方式”不同。

传统 CSS（你可能听说过的）

• 把样式写在 .css 文件里
• 通过 class 名字把样式“贴”到 HTML 元素上
• 示例：

  <!-- index.html -->
  <div class="header">欢迎来到我的网站</div>
  

  /* style.css */
  .header {
    color: blue;
    font-size: 24px;
  }
  

CSS-in-JS（听起来很酷对吧？）

• 直接在 JavaScript / React 组件里写样式
• 样式和组件“绑定在一起”，不用单独建 CSS 文件
• 示例（用 styled-components 库）：

  // Header.jsx
  import styled from 'styled-components';
  
  const Header = styled.div`
    color: blue;
    font-size: 24px;
  `;
  
  export default function App() {
    return <Header>欢迎来到我的网站</Header>;
  }
  

💡 一句话总结：传统 CSS 是“先做衣服再给人穿”，CSS-in-JS 是“边做衣服边给人穿”。

---

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

我们不需要 Spring Boot（那是后端框架，这里只是按题目要求提一下 😅），但需要以下工具：

工具	作用	安装命令
Node.js	运行 JavaScript 项目	官网下载
npm 或 yarn	包管理器	Node.js 自带 npm
VS Code	代码编辑器	官网下载

步骤 1：创建 React 项目

# 使用 npm
npx create-react-app css-compare-demo

# 或使用 yarn
yarn create react-app css-compare-demo

步骤 2：进入项目并启动

cd css-compare-demo
npm start  # 或 yarn start

浏览器会自动打开 http://localhost:3000，看到 React 默认页面就说明成功了！

步骤 3：安装 CSS-in-JS 库（以 styled-components 为例）

npm install styled-components
# 或
yarn add styled-components

✅ 避坑提示：不要手动创建 .css 文件夹或下载 Bootstrap，我们会从零开始写样式！

---

三、核心概念对比：用最简单的话讲清楚

1. 传统 CSS 的工作流

[写 HTML] → [给元素加 class 名] → [在 .css 文件里写对应样式]

优点：

• 简单直观，初学者友好
• 浏览器原生支持，无需额外库
• 可复用性强（多个页面用同一个 CSS 文件）

缺点：

• 容易命名冲突（比如两个组件都用了 .button）
• 删除组件时容易忘记删 CSS，造成“样式垃圾”

2. CSS-in-JS 的工作流

[直接在 JS 组件里定义带样式的组件] → [直接使用]

优点：

• 样式和组件“绑定”，不会污染全局
• 支持动态样式（比如根据 props 改颜色）
• 自动处理浏览器兼容性（部分库支持）

缺点：

• 需要额外学习库的语法
• 增加 bundle 体积（多了个库）
• 对 SEO 不太友好（服务端渲染需额外配置）

对比表格速览

特性	传统 CSS	CSS-in-JS
学习成本	⭐	⭐⭐⭐
全局污染风险	高	几乎无
动态样式支持	弱（需 JS 操作 class）	强（直接写逻辑）
项目体积	小	稍大（需引入库）
适合场景	静态页面、小型项目	复杂交互、大型 React 项目

---

四、实战项目：做一个“主题切换按钮”

我们将用 两种方式 实现同一个功能：点击按钮，文字颜色在红/蓝之间切换。

方式 1：传统 CSS 实现

步骤 1：创建 TraditionalButton.jsx

// src/components/TraditionalButton.jsx
import './TraditionalButton.css';

export default function TraditionalButton({ isRed, toggleTheme }) {
  return (
    <button 
      className={isRed ? 'btn-red' : 'btn-blue'} 
      onClick={toggleTheme}
    >
      {isRed ? '红色主题' : '蓝色主题'}
    </button>
  );
}

步骤 2：创建对应的 CSS 文件

/* src/components/TraditionalButton.css */
.btn-red {
  background-color: #ff6b6b;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

.btn-blue {
  background-color: #4ecdc4;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

步骤 3：在 App.js 中使用

// src/App.js
import TraditionalButton from './components/TraditionalButton';
import './App.css';

function App() {
  const [isRed, setIsRed] = React.useState(true);
  
  const toggleTheme = () => setIsRed(!isRed);

  return (
    <div className="App">
      <h1 style={{ color: isRed ? 'red' : 'blue' }}>
        当前是{isRed ? '红色' : '蓝色'}主题
      </h1>
      <TraditionalButton isRed={isRed} toggleTheme={toggleTheme} />
    </div>
  );
}

方式 2：CSS-in-JS 实现（styled-components）

步骤 1：创建 StyledButton.jsx

// src/components/StyledButton.jsx
import styled from 'styled-components';

const Button = styled.button`
  background-color: ${props => props.isRed ? '#ff6b6b' : '#4ecdc4'};
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
`;

export default function StyledButton({ isRed, toggleTheme }) {
  return (
    <Button isRed={isRed} onClick={toggleTheme}>
      {isRed ? '红色主题' : '蓝色主题'}
    </Button>
  );
}

步骤 2：在 App.js 中替换使用

// src/App.js（只改导入和组件名）
import StyledButton from './components/StyledButton'; // 改这里

function App() {
  // ... 状态逻辑不变
  
  return (
    <div className="App">
      <h1 style={{ color: isRed ? 'red' : 'blue' }}>
        当前是{isRed ? '红色' : '蓝色'}主题
      </h1>
      <StyledButton isRed={isRed} toggleTheme={toggleTheme} /> {/* 改这里 */}
    </div>
  );
}

🔍 观察重点：CSS-in-JS 的样式直接依赖 props.isRed，无需写两个 class！这就是“动态样式”的威力。

---

五、新手常见问题解答（FAQ）

Q1：我是不是必须二选一？不能混用吗？

完全可以混用！ 很多大厂项目都是“传统 CSS + CSS-in-JS”混合模式：

• 全局样式（如 reset.css、字体）用传统 CSS
• 组件样式用 CSS-in-JS

Q2：为什么我用了 styled-components 但样式没生效？

检查三点：

1. 是否正确安装了 styled-components？
2. 是否在组件中正确导入了 styled？
3. 是否把样式写在了反引号 ` 里，而不是普通字符串？

Q3：Spring Boot 和这个有关系吗？

基本没关系。Spring Boot 是 Java 后端框架，负责 API 接口。前端样式方案（CSS/CSS-in-JS）运行在浏览器，两者通过 HTTP 通信。但如果你要做全栈项目，前端代码最终会部署到 Spring Boot 的 static 目录下。

Q4：GitHub 上哪里找示例代码？

我已经把完整代码上传到 GitHub 了！
仓库地址：https://github.com/yourname/css-compare-demo（替换为你的实际地址）
包含两个分支：

• main：传统 CSS 实现
• css-in-js：styled-components 实现

克隆后运行 npm install && npm start 即可查看！

---

六、学习建议 & 下一步路线

🚫 初学者避坑指南

• 不要一上来就学 CSS-in-JS！先掌握传统 CSS（盒模型、定位、Flex 布局）
• 不要为了用新技术而用——简单页面用传统 CSS 更高效
• CSS-in-JS 不是银弹——它解决的是“组件级样式管理”问题，不是所有场景都需要

📚 推荐学习路径

1. 夯实基础：HTML + CSS 基础（推荐 MDN Web Docs）
2. 动手实践：用传统 CSS 做 3 个静态页面（个人主页、博客列表等）
3. 进阶 React：学会组件化开发，理解 props/state
4. 尝试 CSS-in-JS：在复杂组件（如可配置的卡片、动态表单）中使用
5. 探索其他方案：CSS Modules、Tailwind CSS 等

💬 最后说两句

我当初学的时候，也曾纠结“哪种更高级”。后来明白：工具没有高下，只有适不适合。传统 CSS 像毛笔，CSS-in-JS 像马克笔——画国画用毛笔，画插画用马克笔，如此而已。

希望这篇教程能帮你少走弯路！如果觉得有用，欢迎去 B站 搜索“小码哥前端课”给我点个赞～ 下期我们聊聊《如何用 GitHub Actions 自动部署你的 React 项目》，记得关注！

---

附：完整项目结构参考

css-compare-demo/
├── public/
├── src/
│   ├── components/
│   │   ├── TraditionalButton.jsx
│   │   ├── TraditionalButton.css
│   │   ├── StyledButton.jsx
│   ├── App.js
│   └── index.js
├── package.json
└── README.md