CSS-in-JS vs 传统CSS：现代样式方案选择指南
开篇：什么是 CSS-in-JS？它与传统 CSS 的区别是什么？
在前端开发中，我们不仅需要写 HTML 结构和 JavaScript 功能，还需要用 CSS 给网页“化妆”，让它看起来更漂亮。传统的做法是通过单独的 .css 文件来控制样式，比如：
<!-- index.html -->
<link rel="stylesheet" href="style.css">
/* style.css */
button {
background: blue;
color: white;
}
但随着 React、Vue 等现代前端框架的发展，一种新的方式逐渐流行开来——CSS-in-JS。
简单来说，CSS-in-JS 就是把 CSS 写在 JavaScript 文件中，而不是写在单独的 .css 文件里。这样可以让你在一个地方同时管理组件的结构、逻辑和样式，提高代码的模块化程度和可维护性。
为什么要了解这两种方式？
你可能会问：“那我到底该用哪一种呢？”其实这没有绝对答案，不同项目需求适合不同方案。本教程将带你一步步了解这两者的区别、优缺点，并通过实战项目帮助你决定最适合你的写法！
环境准备：你需要安装哪些工具？
为了让你能快速动手实践，我们将使用最简单的环境配置。不需要复杂的打包工具，也能轻松运行示例代码！
步骤 1：安装 Node.js 和 npm
首先，前往 Node.js 官网 下载并安装适合你操作系统的版本（建议选 LTS 版）。
安装完成后，在终端输入以下命令确认是否安装成功：
node -v
npm -v
你应该能看到类似如下输出：
v18.17.0
9.6.7
恭喜你，Node.js 和 npm 已经准备好了！
步骤 2：创建一个项目文件夹
新建一个名为 css-study 的文件夹，并进入它：
mkdir css-study
cd css-study
初始化项目：
npm init -y
这会生成一个默认的 package.json 文件。
步骤 3：安装基本依赖
我们要用到一个轻量级构建工具 Vite 来运行我们的项目，它非常快而且对新手友好。
npm install vite --save-dev
接下来，在 package.json 中添加两个脚本：
"scripts": {
"dev": "vite",
"build": "vite build"
}
步骤 4：创建项目结构
现在我们手动创建项目的基本结构：
/css-study
├── src/
│ └── main.js
├── public/
└── index.html
index.html 内容如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>CSS-in-JS vs CSS</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
步骤 5：启动本地开发服务器
运行下面的命令：
npm run dev
这时你应该看到类似于下面的日志信息：
Local: http://localhost:5173/
打开浏览器访问这个链接，你会看到一个空白页面 —— 没关系，因为我们还没有添加任何内容。接下来我们就要开始写第一个例子啦！
核心概念：理解 CSS-in-JS 和传统 CSS 的差异
一、传统 CSS 是什么样子的？
传统 CSS 是独立于 HTML 和 JS 存在的。我们写好 CSS 文件后，再在 HTML 中引入它，就像之前说过的那样。
示例：给按钮加样式
我们在前面的例子中已经写了一个 style.css 文件，里面定义了按钮的样式：
button {
background: blue;
color: white;
padding: 10px 20px;
border-radius: 5px;
}
然后在 HTML 中引入：
<button>点击我</button>
这就是传统的方式：HTML + CSS 分离编写。
二、CSS-in-JS 是怎么写的？
CSS-in-JS 把样式直接写在 JavaScript 中，通常是配合 React 或 Vue 使用。
举个简单的例子，我们用 styled-components 这个流行库来展示。
先安装：
npm install styled-components
然后修改 main.js 文件：
import styled from 'styled-components';
// 创建带样式的按钮组件
const StyledButton = styled.button`
background: blue;
color: white;
padding: 10px 20px;
border-radius: 5px;
`;
// 渲染按钮
function App() {
const container = document.getElementById('app');
const button = StyledButton(null, '点击我');
container.appendChild(button);
}
App();
你可以刷新浏览器，看到蓝色按钮显示出来！
这里我们并没有使用单独的 .css 文件，而是直接在 JS 文件中写了 CSS。这就是 CSS-in-JS 最核心的做法。
三、关键概念对比表
| 特点 | 传统 CSS | CSS-in-JS |
|---|---|---|
| 写在哪里 | 单独的 .css 文件 |
JavaScript 文件中 |
| 是否模块化 | 否（需手动命名避免冲突） | 是，每个组件都有自己的样式 |
| 能否动态传参 | 否 | 可以结合 JS 变量或 props |
| 组件复用 | 需额外处理 | 更容易封装和复用 |
| 工具链复杂度 | 低 | 相对高 |
| 初学难度 | 简单 | 入门略难 |
实战项目：做一个按钮组件，分别用两种方法实现
我们现在要分别用传统 CSS 和 CSS-in-JS 实现同一个按钮组件。通过这个小项目，你能直观地感受它们的差异。
项目目标
创建一个带样式的按钮，当用户点击时颜色会变化。
方法一：传统 CSS 方式
步骤 1：写 HTML 和 CSS
编辑 index.html：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>传统 CSS 示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button id="myBtn">点击变色</button>
<script src="/src/button.js"></script>
</body>
</html>
新建 style.css 文件：
#myBtn {
background: blue;
color: white;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
新建 src/button.js：
document.getElementById('myBtn').addEventListener('click', function () {
this.style.background = this.style.background === 'blue' ? 'red' : 'blue';
});
刷新页面，你应该可以看到点击变色的效果啦 ✅
方法二：CSS-in-JS 方式（使用 styled-components）
我们将用 styled-components 实现同样的功能。
步骤 1：安装依赖（前面已装过就跳过）
npm install styled-components
步骤 2：修改 main.js 文件
import styled from 'styled-components';
// 创建按钮组件
const StyledButton = styled.button`
background: ${props => props.primary ? 'purple' : 'blue'};
color: white;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s;
&:hover {
opacity: 0.8;
}
`;
function App() {
const container = document.getElementById('app');
let isPurple = false;
const button = StyledButton({ primary: isPurple }, '点击变色');
button.addEventListener('click', () => {
isPurple = !isPurple;
button.style.background = isPurple ? 'purple' : 'blue';
});
container.appendChild(button);
}
App();
刷新页面，你会发现按钮同样实现了点击切换颜色的功能。这次所有样式都在 JS 中完成。
对比总结
| 维度 | 传统 CSS | CSS-in-JS |
|---|---|---|
| 代码组织 | 多个文件分散管理 | 所有内容在一个 JS 文件中 |
| 动态样式 | 需要 JS 操作 DOM | 可直接使用变量或 props |
| 维护成本 | 易产生命名冲突 | 自动隔离，不容易冲突 |
| 可读性 | 简洁明了 | 结合 JS 灵活但略复杂 |
常见问题：新手经常遇到的问题 & 解决办法
Q1：为什么用了 styled-components，但样式没生效？
常见原因：
- 没有正确挂载组件到 DOM（检查是否调用
appendChild） - 忘记引入 CSS-in-JS 库（如未
import styled from 'styled-components'）
✅ 解决方法：确保代码中所有依赖都正确导入，并正确调用渲染逻辑。
Q2：CSS-in-JS 性能会比传统 CSS 差吗？
一般不会显著影响性能。CSS-in-JS 在开发阶段可能稍微慢一点，但在生产环境中优化后的结果与传统方式差别不大。
✅ 建议：优先关注代码结构和可维护性，性能通常不是瓶颈。
Q3：如何调试 CSS-in-JS 的样式？
你可以像普通 DOM 元素一样用浏览器开发者工具查看元素样式，也可以打印出组件看内部结构。
✅ 提示：很多 IDE 插件支持语法高亮，比如 VSCode 的 Babel ES6/ES7 插件。
学习建议：下一步该怎么做？
恭喜你完成了本次学习旅程！下面是几个继续深入的方向：
推荐学习路径：
掌握 React 基础（如果你还没学过）
推荐资源：React 官方文档中文版尝试更多 CSS-in-JS 工具
如 Emotion、JSS、Fela 等，看看哪种更适合你的项目风格。学习 CSS Modules（另一种模块化 CSS 的方式）
结合 Webpack 使用的模块化 CSS 方案，介于传统 CSS 与 CSS-in-JS 之间。阅读源码或进阶文章
比如看 styled-components 的 GitHub 仓库：https://github.com/styled-components/styled-components实际项目演练
试着把一个小项目从传统 CSS 改成 CSS-in-JS，体验两者的差异。
结语
在这篇教程中，我们从零开始搭建了开发环境，讲解了传统 CSS 和 CSS-in-JS 的核心理念，并通过一个简单的项目进行了对比演示。
无论你是刚入门的新手，还是想进一步提升技能的前端爱好者，希望这篇实践性强的教程能帮你迈出第一步。
记住一句话：工具不重要，解决问题才是核心。 你可以根据项目规模、团队习惯、个人喜好来选择适合你的样式方案。
如果你喜欢这样的教学方式，欢迎继续关注后续教程哦～我们一起写出更好看的页面 💻🎨
评论 0