《CSS-in-JS vs 传统CSS：现代样式方案选择指南》

开篇：我们为什么需要样式管理？

在网页开发中，**样式（CSS）**决定了网站的外观。从颜色、字体到布局，都离不开它。

但在实际开发中，我们会遇到一些挑战，比如：

• 样式冲突（多个类名重复）
• 维护困难（样式分布太广，找不到改哪）
• 复用性差（想要复用某个组件的样式很麻烦）

为了解决这些问题，前端开发者提出了两种主流方式来组织样式：

1. 传统CSS —— 独立 .css 文件 + HTML/CSS分离
2. CSS-in-JS —— 把样式写在 JavaScript/JSX 中，和组件放在一起

这篇文章将带你认识这两种方法，并通过一个简单项目对比它们的区别，帮助你做出合适的选择。

---

环境准备：开始前你需要做什么？

工具准备

为了演示 CSS 和 CSS-in-JS 的区别，我们将使用 React 框架来做示例。因为它是目前最流行支持 CSS-in-JS 的框架之一。

请确保你本地安装了以下工具：

✅ Node.js（建议 v18 或更高）
✅ npm 或 yarn
✅ 创建 React App 脚手架工具：npx create-react-app my-app

如果你不熟悉 React，别担心，我们只需要最基础的结构即可。

初始化项目

npx create-react-app css-comparison
cd css-comparison
npm start

浏览器会自动打开 http://localhost:3000，看到初始界面就说明环境准备好了！

接下来，我们将分别实现相同的组件，看看传统 CSS 和 CSS-in-JS 是怎么做的。

---

核心概念：CSS 与 CSS-in-JS 到底有什么不同？

什么是传统 CSS？

这是你学习前端时最早接触的方式：创建 .css 文件，在其中定义类名和样式，然后在 HTML 中引入并使用类名绑定样式。

优点：

• 简单易懂，适合初学者
• 支持全局样式复用

缺点：

• 类名容易重复（尤其是多人协作）
• 逻辑组件和样式文件分离，维护成本高

什么是 CSS-in-JS？

顾名思义，就是把 CSS 写进 JS 文件中。通常使用库来完成这个任务，如：

• styled-components
• emotion
• linaria

它的核心理念是：“每个组件都有自己的样式”，可以避免类名冲突，并且样式更贴近组件本身。

优点：

• 样式封装性强，不容易冲突
• 更好地支持动态样式（根据变量控制样式）
• 开发体验统一，不需要切换文件

缺点：

• 学习曲线略高于传统 CSS
• 可能带来额外的构建依赖

---

实战项目：用两种方式做一个按钮组件

我们将创建一个“可交互按钮”，点击后改变文字颜色。我们将用两种方式分别实现。

📌 本小节的代码都在你的 React 项目的 src/ 目录下操作

方式一：传统 CSS

第一步：创建组件文件

新建 src/components/ButtonTraditional.js 文件：

import './ButtonTraditional.css';

function ButtonTraditional() {
  return (
    <button className="my-button">
      我是一个传统按钮
    </button>
  );
}

export default ButtonTraditional;

第二步：创建样式文件

新建 src/components/ButtonTraditional.css：

.my-button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.my-button:hover {
  background-color: darkblue;
}

第三步：使用组件

编辑 src/App.js：

import ButtonTraditional from './components/ButtonTraditional';

function App() {
  return (
    <div className="App">
      <h1>CSS 示例</h1>
      <ButtonTraditional />
    </div>
  );
}

export default App;

启动项目后你应该能看到按钮显示出来了 ✅

方式二：CSS-in-JS（使用 styled-components）

第一步：安装插件

npm install styled-components

第二步：创建组件文件

新建 src/components/ButtonStyled.jsx：

import styled from 'styled-components';

const MyStyledButton = styled.button`
  background-color: green;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;

  &:hover {
    background-color: darkgreen;
  }
`;

function ButtonStyled() {
  return (
    <MyStyledButton>
      我是一个 CSS-in-JS 按钮
    </MyStyledButton>
  );
}

export default ButtonStyled;

第三步：使用组件

修改 src/App.js：

import ButtonStyled from './components/ButtonStyled';

function App() {
  return (
    <div className="App">
      <h1>CSS-in-JS 示例</h1>
      <ButtonStyled />
    </div>
  );
}

export default App;

现在你可以在页面上看到两个按钮，分别是传统 CSS 和 CSS-in-JS 的方式实现 ✅

---

两种方式对比总结

对比项	传统 CSS	CSS-in-JS
文件结构	单独 CSS 文件	样式嵌入 JS/JSX 文件
类名冲突	容易冲突	自动生成唯一类名，无冲突
可维护性	组件与样式分离，难维护	样式与组件同在一个文件，易读
动态样式支持	不直接支持	很容易支持（传 props 控制）
学习难度	简单	略复杂

---

新手常见问题解答（FAQ）

Q1：我应该先学哪个？

👉 建议先学传统 CSS。因为它是最基础的样式语言，大多数文档、资源也基于此编写。掌握了基础后，再过渡到 CSS-in-JS 会更容易理解和应用。

Q2：CSS-in-JS 是不是未来的趋势？

✅ 不是“必须”，而是“一种选择”。很多大公司使用 CSS-in-JS（如 Netflix、Airbnb），但它并不是唯一的最佳实践。是否采用要根据项目规模、团队习惯和性能要求来决定。

Q3：用了 CSS-in-JS 还需要写普通 CSS 吗？

通常不需要。CSS-in-JS 可以完全替代传统的 .css 文件风格，但也可以混合使用，取决于你自己。

Q4：CSS-in-JS 性能会不会变慢？

大部分 CSS-in-JS 库会在生产环境进行优化，性能影响很小。除非你在极其大规模的应用中使用，否则不用担心。

---

下一步学习建议

恭喜你完成了第一个对比项目！下面是一些你可以继续深入的方向：

如果你选择继续使用传统 CSS：

• 学习 CSS 预处理器（如 Sass/SCSS）提高效率
• 尝试使用 CSS Modules 解决类名冲突问题
• 研究 BEM 命名规范 提高样式可维护性

如果你感兴趣于 CSS-in-JS：

• 学习 styled-components 高级功能（如主题、动画）
• 探索其他方案：如 emotion、styled-jsx
• 结合 UI 框架（如 Chakra UI、Material UI）快速搭建界面

---

结语：选对方法，才能高效开发

无论是传统 CSS 还是 CSS-in-JS，都不是绝对的优劣之分，而是在不同场景下的合适选择。

作为初学者，关键是理解它们的工作原理和适用场景。随着你开发经验的增长，你会更清楚什么项目该用哪种方式。

希望这篇教程能为你打下一个良好的基础，欢迎继续探索更多前端知识 🚀

---

如需获取完整示例代码，请访问本文配套的 GitHub 仓库（假设有链接的话）。如有疑问，欢迎留言交流 😊