CSS-in-JS vs 传统CSS：现代样式方案选择指南
开篇：什么是 CSS 和 CSS-in-JS？
在网页开发中，HTML 负责结构，JavaScript 负责行为，而 CSS（层叠样式表）负责外观和样式。你可以理解为它是网页的“化妆师”——没有它，页面就像素颜一样单调。
而近几年，一种新的写样式方式逐渐流行起来，叫做 CSS-in-JS。这个名字听起来有点神秘，其实它的核心思想是：用 JavaScript 来定义 CSS 样式。
我们为什么要学这个？因为它解决了传统 CSS 的一些痛点，比如：
- 全局样式容易冲突
- 难以动态更改样式
- 组件化开发时难以维护样式作用域
本教程将会带你从头开始认识这两种方式，并通过一个小项目来比较它们的使用体验。
环境准备：搭建你的第一个前端项目
1. 安装 Node.js 和 npm
首先你需要安装 Node.js，它自带了包管理器 npm。安装完成后，在命令行输入：
node -v
npm -v
这两个命令会分别输出 Node.js 和 npm 的版本号，表示安装成功。
2. 创建一个 React 项目
我们将使用 React 来演示 CSS-in-JS 的使用场景（因为 React 社区广泛采用这种技术）。
运行以下命令创建项目：
npx create-react-app css-comparison
cd css-comparison
这样你就有了一个完整的开发环境。接下来可以安装一个常用的 CSS-in-JS 工具库：
npm install styled-components
3. 启动项目
在项目根目录下运行：
npm start
浏览器会自动打开 http://localhost:3000，显示 React 默认首页。
现在你的开发环境就准备好了！
核心概念讲解
一、传统 CSS 是如何工作的？
传统 CSS 使用 .css 文件来定义样式，然后通过 <link> 或 import 引入到 HTML 或组件中。
示例代码：
- 新建文件
App.css
/* App.css */
.box {
width: 200px;
height: 200px;
background-color: blue;
color: white;
text-align: center;
line-height: 200px;
}
- 在
App.js中引入并使用
// App.js
import './App.css';
function App() {
return (
<div className="box">
Hello CSS!
</div>
);
}
export default App;
✅ 运行效果：你会看到一个蓝色正方形框，中间写着 "Hello CSS!"
小贴士：CSS 是通过 class 名称绑定样式的，所以你在 JSX 中必须使用
className属性而不是class。
二、CSS-in-JS 是什么？
CSS-in-JS 把 CSS 写在 JS 文件里，通常是以字符串模板的形式写入，由专门的库处理这些样式规则。
最流行的工具包括：
styled-componentsemotionlinaria
下面以 styled-components 为例，来实现同样的盒子组件。
示例代码：
// App.js
import styled from 'styled-components';
const Box = styled.div`
width: 200px;
height: 200px;
background-color: red;
color: white;
text-align: center;
line-height: 200px;
`;
function App() {
return <Box>Hello Styled!</Box>;
}
export default App;
✅ 效果：会出现一个红色的正方形框，写着 “Hello Styled!”
✅ 小结：你会发现，你根本不需要
.css文件了！所有的样式都在 JS 里完成。
三、两种方法对比总结
| 特性 | 传统 CSS | CSS-in-JS（以 styled-components 为例） |
|---|---|---|
| 文件结构 | 独立的 .css 文件 |
样式直接写在组件代码中 |
| 命名冲突 | 容易冲突 | 自动命名，避免冲突 |
| 动态样式支持 | 较弱 | 支持传参，非常灵活 |
| 可维护性（组件级别） | 一般 | 更高，封装在组件内部 |
| 学习曲线 | 简单 | 需要额外学习库知识 |
实战项目：做一个按钮组件
我们将分别用两种方式做一个小按钮组件，来看看各自的优缺点。
项目目标：
- 按钮默认背景是蓝色
- 鼠标悬停变为深蓝色
- 点击后变为绿色
一、传统 CSS 实现
1. 创建 Button.css
.button-style {
padding: 10px 20px;
background-color: #4CAF50;
border: none;
color: white;
cursor: pointer;
font-size: 16px;
border-radius: 4px;
transition: background-color 0.3s;
}
.button-style:hover {
background-color: #45a049;
}
2. 创建 Button.js
import React, { useState } from 'react';
import './Button.css';
function Button({ children }) {
const [isClicked, setIsClicked] = useState(false);
const handleClick = () => {
setIsClicked(true);
};
return (
<button
className="button-style"
onClick={handleClick}
style={{ backgroundColor: isClicked ? 'green' : '' }}
>
{children}
</button>
);
}
export default Button;
在
App.js中调用这个按钮：
import Button from './Button';
function App() {
return <Button>点击我</Button>;
}
二、CSS-in-JS 实现（使用 styled-components）
1. 创建 Button.js
import React, { useState } from 'react';
import styled from 'styled-components';
const ButtonStyled = styled.button`
padding: 10px 20px;
background-color: ${(props) => (props.clicked ? 'green' : '#4CAF50')};
border: none;
color: white;
cursor: pointer;
font-size: 16px;
border-radius: 4px;
transition: background-color 0.3s;
&:hover {
background-color: #45a049;
}
`;
function Button({ children }) {
const [isClicked, setIsClicked] = useState(false);
return (
<ButtonStyled clicked={isClicked} onClick={() => setIsClicked(true)}>
{children}
</ButtonStyled>
);
}
export default Button;
同样在 App.js 中引用即可。
三、实战对比分析
| 方面 | 传统 CSS | CSS-in-JS |
|---|---|---|
| 文件数量 | 多一个 .css 文件 |
全部写在一个文件中 |
| 样式更新 | 必须写 inline style 或额外类名 | 可直接通过 props 控制 |
| 模块化程度 | 低 | 高（组件样式封装紧密） |
| 维护便利度 | 中等 | 更方便 |
常见问题解答（FAQ）
Q1：CSS-in-JS 不是违反关注点分离吗？
这是很多人对 CSS-in-JS 的第一印象。但现代前端强调的是组件化开发，一个组件应该包含自己的结构、逻辑、样式，三者统一才能保证可维护性和复用性。
CSS-in-JS 正是这种理念的体现：每个组件拥有自己的样式，而不是全局污染。
Q2：CSS-in-JS 性能差吗？
对于大多数应用来说，影响微乎其微。像 styled-components 会做缓存和优化，不会频繁地操作 DOM 插入 <style> 标签。
除非你是超大规模系统或追求极致性能优化，否则不用担心性能问题。
Q3：我能同时用传统 CSS 和 CSS-in-JS 吗？
当然可以！这在实际项目中很常见。例如：
- 第三方库使用传统 CSS（如 Ant Design）
- 自己写的组件使用 styled-components
- 页面布局仍用 CSS Modules 或 Tailwind CSS
混合使用完全没有问题，关键是按需使用和统一风格。
学习建议与下一步路径
初学者推荐学习顺序：
- 先学会传统 CSS（掌握基本语法、盒模型、布局）
- 熟悉 JavaScript + React 基础
- 再尝试 CSS-in-JS
- 进阶：学习主题模式、响应式设计、CSS-in-JS 性能优化
推荐学习资源：
- 📚 MDN CSS 教程（免费）：MDN Web Docs
- 🎥 React 官方中文教程：React 官网
- 🔧 styled-components 文档：styled-components.com
- 💻 交互式练习平台：CodePen / CodeSandbox
结语
CSS-in-JS 是现代前端开发中的一个重要趋势，特别是在使用 React、Vue 3 的 Composition API 等新技术时。
它并不是要完全替代传统 CSS，而是提供了一种更符合组件化思维的样式管理方式。
通过本文的学习，你应该已经了解了：
- 什么是 CSS-in-JS？
- 为什么要用它？
- 如何在项目中使用？
- 与传统 CSS 的区别与优劣
希望你能在实践中进一步探索，找到最适合自己的工作流。
如果你觉得这篇文章有帮助，欢迎分享给更多的初学者！
🎉 加油，未来的大前端工程师！
评论 0