CSS-in-JS vs 传统CSS：现代样式方案选择指南
开篇：什么是CSS与CSS-in-JS？它们能做什么？
在网页开发中，**CSS（层叠样式表）**就像给网页“穿衣服”的工具。它负责让页面好看、有颜色、有排版。
随着前端技术的发展，一种新的写法出现了——CSS-in-JS。它的核心思想是：把 CSS 写在 JavaScript 文件里。这听起来有点奇怪吧？不过它解决了传统 CSS 的很多痛点，比如样式冲突、难以维护等。
本教程将带你从头开始，了解这两者的区别，并通过一个简单项目来实践，让你明白什么时候用传统CSS、什么时候更适合用CSS-in-JS。
环境准备：搭建你的第一个开发环境
我们要做的是一个简单的按钮组件，使用 React 演示两种方式的实现。所以你需要先安装以下工具：
1. 安装 Node.js 和 npm
- 前往 https://nodejs.org 下载并安装 LTS 版本
- 安装完成后，在终端输入：
如果显示版本号说明安装成功。node -v npm -v
2. 创建 React 项目
我们使用 create-react-app 快速创建项目：
npx create-react-app style-comparison
cd style-comparison
npm start
这样就启动了一个本地服务器，默认会在浏览器打开 http://localhost:3000。
核心概念：传统CSS 与 CSS-in-JS 的区别
让我们用最简单的语言解释这两个概念。
传统CSS的特点
- 分离结构与样式：HTML 负责内容，CSS 负责外观。
- 全局作用域：同一个类名可能影响多个元素。
- 依赖文件引入：你得在 HTML 中用
<link>或 JavaScript 动态导入。
✅ 优点：学习成本低、兼容性好
❌ 缺点：命名冲突多、样式管理难
示例代码
在 src/App.css 中写一个样式：
.my-button {
background-color: blue;
color: white;
padding: 10px 20px;
border-radius: 5px;
}
在 src/App.js 中使用这个类：
import './App.css';
function App() {
return (
<button className="my-button">点击我</button>
);
}
CSS-in-JS 是什么？
CSS-in-JS 不再单独写 CSS 文件，而是直接在 JS 中定义样式对象或字符串，然后通过库自动注入到页面中。
常见的 CSS-in-JS 库包括：
- styled-components
- emotion
- glamorous
✅ 优点：局部作用域、动态样式支持、组件化更方便
❌ 缺点：性能略差、初次学习成本略高
示例代码（使用 styled-components）
安装库：
npm install styled-components
在 src/App.js 中使用：
import styled from 'styled-components';
const MyButton = styled.button`
background-color: green;
color: white;
padding: 10px 20px;
border-radius: 5px;
`;
function App() {
return <MyButton>点击我（CSS-in-JS）</MyButton>;
}
你会看到一个绿色按钮，没有额外引入 CSS 文件！
实战项目：做个切换样式的按钮组件
我们来做一个小项目：显示两个按钮，分别用传统 CSS 和 CSS-in-JS 方式渲染，看看它们的区别。
第一步：创建两个组件文件
在 src 目录下新建两个文件：
TraditionalButton.jsStyledButton.js
第二步：传统CSS写法（TraditionalButton.js）
在 TraditionalButton.js 中写：
import './App.css';
function TraditionalButton() {
return (
<button className="traditional-btn">传统按钮</button>
);
}
export default TraditionalButton;
在 App.css 中添加样式：
.traditional-btn {
background: red;
color: white;
padding: 10px 20px;
margin: 10px;
border: none;
border-radius: 5px;
}
第三步：CSS-in-JS写法（StyledButton.js）
在 StyledButton.js 中写：
import styled from 'styled-components';
const StyledBtn = styled.button`
background: purple;
color: white;
padding: 10px 20px;
margin: 10px;
border: none;
border-radius: 5px;
`;
function StyledButton() {
return <StyledBtn>CSS-in-JS按钮</StyledBtn>;
}
export default StyledButton;
第四步：在App.js中同时展示
修改 App.js：
import './App.css';
import TraditionalButton from './TraditionalButton';
import StyledButton from './StyledButton';
function App() {
return (
<div style={{ textAlign: 'center', marginTop: 100 }}>
<h2>传统CSS vs CSS-in-JS</h2>
<TraditionalButton />
<StyledButton />
</div>
);
}
export default App;
刷新浏览器，你会看到两个不同风格的按钮，分别使用了不同的样式方式！
常见问题：新手容易遇到的问题和解答
Q1：为什么有时候样式没生效？
A：可能是类名拼错了，或者样式被覆盖了。在 CSS-in-JS 中一般不会出现这个问题，因为它默认局部作用域。
Q2：CSS-in-JS 性能会不会很差？
A：大部分情况下影响不大。如果你的项目不大，两者性能差别可以忽略不计。
Q3：怎么判断该用哪个？
A：看团队习惯和项目大小。如果项目大、组件多，推荐使用 CSS-in-JS；如果是静态页面或者个人项目，传统 CSS 更简单。
Q4：CSS-in-JS 是否必须学 React 才能用？
A：不一定。虽然很多 CSS-in-JS 库为 React 设计，但也有支持 Vue、原生 JS 的方案，如 Emotion 支持多种框架。
学习建议：下一步应该学什么？
学完这个入门教程后，你可以继续深入以下几个方向：
✅ 进阶CSS技巧：
- Flex 布局和 Grid 布局
- 响应式设计
- 动画和过渡效果
✅ 掌握更多 CSS-in-JS 工具：
- Emotion
- Aphrodite
- JSS
尝试换一个库重写今天的项目，熟悉不同语法风格。
✅ 组件化思维训练：
学习如何把样式和功能打包成可复用组件，这是现代前端开发的核心能力之一。
小结
在这篇教程中，我们比较了传统CSS和CSS-in-JS两种流行的样式编写方式。你学会了：
- 如何在React中使用传统CSS
- 如何安装和使用CSS-in-JS库（如styled-components）
- 实现了一个对比演示项目
- 解决常见初学者问题
- 明确下一步学习路线
无论你是想快速开发一个个人网站，还是参与大型企业级应用，掌握这两种方式都非常重要。选择合适的技术，才能事半功倍！
🔚 Happy Coding！
评论 0