CSS-in-JS vs 传统CSS：现代样式方案选择指南（面向零基础初学者）
开篇：什么是CSS-in-JS？它和传统CSS有什么不同？
在开发网页的时候，我们通常会用HTML 写结构、用CSS 来控制样式。而传统的做法是把 HTML 和 CSS 分开写，比如：
<!-- index.html -->
<div class="header">欢迎来到我的网站</div>
/* style.css */
.header {
color: blue;
}
但在近年来，前端技术发展迅速，出现了一种新的写法：CSS-in-JS。顾名思义，就是把 CSS 样式直接写进 JavaScript 文件里。这种方式让样式和组件紧密结合，也更容易实现一些高级功能。
那么问题来了：
👉 我该用哪种方式来写样式呢？是继续用传统 CSS，还是试试 CSS-in-JS 呢？
本文将一步步带你了解这两个技术，让你从零开始上手，并通过一个小项目对比它们的使用方式和优缺点。
环境准备：搭建一个简单的开发环境
1. 安装 Node.js 和 npm
我们要先安装 Node.js，这是运行 JavaScript 的运行环境。npm 是 Node.js 自带的包管理器，用来安装各种工具。
- 官网地址：https://nodejs.org
- 下载并安装 LTS 版本（长期支持版）
安装完成后，在命令行中输入以下命令检查是否安装成功：
node -v
npm -v
你应该能看到两个版本号，说明安装成功了！
2. 创建项目文件夹
新建一个空文件夹，比如 my-styling-project，然后进入这个文件夹，运行：
npm init -y
这会创建一个 package.json 文件，记录你的项目信息。
3. 安装 React（为了演示 CSS-in-JS 示例）
我们以最流行的 CSS-in-JS 库之一 styled-components 为例，因此需要一个 React 环境。
安装 React：
npm install react react-dom
再安装 styled-components：
npm install styled-components
现在我们的环境就准备好了，接下来就可以动手写代码啦！
核心概念：用大白话解释关键术语
1. 什么是传统 CSS？
就是你以前学过的那种写法：
- 单独的
.css文件 - 通过 class 或 id 给 HTML 元素添加样式
- 适合静态页面或小型项目
优点：
- 学习成本低
- 浏览器兼容性好
- 易调试
缺点：
- 模块化不够强
- 大项目时容易命名冲突
- 不方便动态修改样式
2. 什么是 CSS-in-JS？
是一种“把 CSS 写进 JS”的新方法，特别是在 React 项目中非常流行。
常见库有：
- styled-components（我们将用它做例子）
- emotion
- glamorous
优点：
- 样式和组件在一起，结构更清晰
- 支持动态样式（比如根据用户操作改变颜色）
- 自动处理 class 名，避免冲突
缺点：
- 初期学习曲线略陡
- 编译后性能可能稍差（不过影响不大）
举例对比一下
假设我们要做一个蓝色背景的文字框，来看两种写法的区别：
✅ 传统 CSS：
<!-- App.html -->
<div class="box">这是一个盒子</div>
/* style.css */
.box {
background-color: lightblue;
padding: 10px;
font-size: 18px;
}
🌟 CSS-in-JS（使用 styled-components）：
import styled from 'styled-components';
const Box = styled.div`
background-color: lightblue;
padding: 10px;
font-size: 18px;
`;
function App() {
return <Box>这是一个盒子</Box>;
}
可以看到，样式直接写在 JS 文件中，而且可以直接当成组件使用 <Box>，是不是感觉很酷？
实战项目：用两种方式实现同一个小项目
目标：创建一个按钮组件，点击后按钮文字变成红色。
项目结构示意：
my-styling-project/
├── index.html
├── index.js
├── style.css ← 传统CSS
└── components/ ← 存放React组件和CSS-in-JS样式
└── Button.js
第一步：传统 CSS 方式实现按钮
1. HTML 文件内容 (index.html)：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>CSS 实践</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="root"></div>
<script src="./index.js"></script>
</body>
</html>
2. JS 文件内容 (index.js)：
document.getElementById('root').innerHTML = `
<button class="btn">点我变红</button>
`;
document.querySelector('.btn').addEventListener('click', function () {
this.style.color = 'red';
});
3. CSS 文件内容 (style.css)：
.btn {
background-color: lightgreen;
padding: 10px 20px;
border: none;
font-size: 16px;
cursor: pointer;
}
✅ 运行效果：打开浏览器访问 index.html，点击按钮文字变红。
第二步：CSS-in-JS 方式实现按钮（使用 styled-components）
1. 创建组件文件 (components/Button.js)：
import styled from 'styled-components';
// 用JS定义样式
const StyledButton = styled.button`
background-color: lightgreen;
padding: 10px 20px;
border: none;
font-size: 16px;
cursor: pointer;
color: ${props => props.isRed ? 'red' : 'black'};
`;
function Button({ isRed, onClick }) {
return (
<StyledButton isRed={isRed} onClick={onClick}>
点我变红
</StyledButton>
);
}
export default Button;
2. 修改主入口 JS 文件 (index.js)：
import React from 'react';
import ReactDOM from 'react-dom/client';
import Button from './components/Button';
function App() {
const [isRed, setIsRed] = React.useState(false);
return (
<Button
isRed={isRed}
onClick={() => setIsRed(true)}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
✅ 运行效果：按钮默认黑色，点击之后变红。
💡 小提示：如果你没有设置好 React 环境（比如没有 Webpack），可以用在线平台 CodeSandbox 快速尝试上面代码。
新手常见问题解答
❓ Q1：为什么用 CSS-in-JS？传统 CSS 不好吗？
- 如果你是做一个小型页面，或者只是想练手，那传统 CSS 完全够用了。
- 如果你是做一个大型 React 项目，CSS-in-JS 有更好的模块化能力和样式可维护性。
❓ Q2：CSS-in-JS 是不是比传统 CSS 更快？
不一定哦。CSS-in-JS 在运行时会“生成”样式，所以有时候加载会慢一点点。不过对于大多数项目来说，这种差别可以忽略不计。
❓ Q3：CSS-in-JS 会影响 SEO 吗？
不会。搜索引擎主要看 HTML 内容和结构，样式对 SEO 影响极小。
❓ Q4：我要不要马上转 CSS-in-JS？
建议先掌握传统 CSS 再学习 CSS-in-JS。打牢基础，后面升级更快！
学习建议：下一步怎么学？
🔹 1. 推荐学习路线图
| 阶段 | 内容 |
|---|---|
| 初级 | 学 HTML + CSS 基础，能做出简单网页 |
| 中级 | 学 JavaScript，能写出交互逻辑 |
| 高级 | 学 React 框架，尝试 CSS-in-JS 技术 |
| 进阶 | 研究 Webpack、Babel 等构建工具 |
🔹 2. 学习资源推荐
CSS 基础：
JavaScript 基础：
React & styled-components 学习：
🔹 3. 动手练习建议
- 写一个个人简历页，尝试用两种方式写样式，比较感受
- 参考 Ant Design 组件库，看看别人是怎么封装组件样式的
- 用 CodeSandbox 搭建一个 React + styled-components 的小 Demo
总结：你该如何选择？
| 使用场景 | 推荐方式 |
|---|---|
| 初学者入门 | 传统 CSS |
| 静态网站展示 | 传统 CSS |
| React 项目开发 | CSS-in-JS（如 styled-components） |
| 团队协作开发 | CSS-in-JS（减少命名冲突） |
| 想追求更好的工程规范 | CSS-in-JS |
🎉 恭喜你完成了《CSS-in-JS vs 传统CSS》的初学指南！希望这篇文章能帮你建立清晰的认知，也能作为你进一步学习的起点。别忘了多写代码，多练才是王道！
如果你觉得这篇文章有用，也可以分享给身边正在学习前端的朋友 👇💬
评论 0