CSS-in-JS vs 传统CSS：现代样式方案选择指南
开篇：什么是CSS-in-JS和传统CSS？
在前端开发中，我们经常需要为网页添加“样式”——比如设置按钮颜色、字体大小、背景图片等。实现这些样式的最传统方式是使用 CSS（层叠样式表），这是我们今天要介绍的第一种方法。
然而，随着 JavaScript 框架的发展（尤其是 React 的流行），一种新的做法开始兴起，叫做 CSS-in-JS。它的基本思想是：把样式写在 JavaScript 文件里，而不是单独的 .css 文件。
这两种方式都能完成任务，但它们各有优缺点。接下来，我们就从零开始一步步认识它们，看看哪一种更适合你！
环境准备：搭建你的开发环境
要开始实践 CSS 和 CSS-in-JS，你需要一个基础的开发环境：
步骤 1：安装 Node.js
前往 https://nodejs.org，下载并安装最新 LTS 版本（长期支持版）。
验证是否安装成功：
node -v
npm -v
你应该能看到类似输出：
v20.11.x
9.8.x
步骤 2：创建项目目录
新建一个文件夹作为你的工作目录，例如：
mkdir css-vs-js-demo
cd css-vs-js-demo
步骤 3：初始化 npm 项目
运行以下命令来创建 package.json：
npm init -y
步骤 4：安装 Vite（现代前端构建工具）
我们将使用 Vite 来快速搭建开发服务器：
npm create vite@latest
按照提示选择：
- 项目名称：
css-vs-js-demo - 框架类型：选择
React - 是否使用 TypeScript？选择
No - 是否需要额外功能？回车继续
进入新项目并安装依赖：
cd css-vs-js-demo
npm install
启动开发服务器：
npm run dev
现在你可以访问 http://localhost:5173 查看默认页面。
🎉 至此，你的开发环境已经准备好！下一步我们来看看如何写样式。
核心概念：CSS vs CSS-in-JS 是什么？
我们先用一句话概括区别：
❝ CSS 是独立的样式文件；而 CSS-in-JS 是将样式直接写进 JavaScript 中。 ❞
为了更清楚地说明，下面我们分别介绍两种方式的核心概念和语法特点。
传统CSS：分离式样式管理
✅ 优点：
- 简单直观，学习成本低
- 浏览器原生支持，性能好
- 大型项目易维护（如果结构清晰）
💡 基本用法：
创建一个文件：src/index.css，内容如下：
.container {
text-align: center;
padding: 20px;
}
.title {
color: #333;
}
然后在 main.jsx 中引入它：
import './index.css'
function App() {
return (
<div className="container">
<h1 className="title">Hello, CSS!</h1>
</div>
)
}
export default App
✅ 效果：你会看到居中的标题文字，并带有灰色字体。
CSS-in-JS：样式和组件紧密绑定
✅ 优点：
- 避免类名冲突
- 动态样式更容易实现
- 更适合组件化开发（如 React）
💡 常见库推荐：
- styled-components（最受欢迎）
- Emotion
- JSS
🛠️ 我们以最常用的 styled-components 为例来演示：
使用 styled-components 实现相同效果
第一步：安装库
npm install styled-components
第二步：编写代码
打开 App.jsx，改成如下代码：
import styled from 'styled-components'
// 创建带样式的组件
const Container = styled.div`
text-align: center;
padding: 20px;
`
const Title = styled.h1`
color: #333;
`
function App() {
return (
<Container>
<Title>Hello, styled-components!</Title>
</Container>
)
}
export default App
✅ 效果：仍然看到居中的黑色标题，但这次样式是直接写在 JS 文件里！
小结对比表
| 特性 | 传统 CSS | CSS-in-JS（以 styled-components 为例） |
|---|---|---|
| 编写位置 | 单独 .css 文件 |
JS 文件内 |
| 类名控制 | 手动命名 className | 自动生成唯一 class 名 |
| 动态样式 | 相对困难 | 易于传入变量/函数 |
| 学习难度 | 简单 | 初学者稍难 |
| 适用框架 | 所有 | 主要用于 React |
实战项目：做一个彩色按钮组件
目标：
用两种方式都实现一个“按钮”，可以点击，并根据状态显示不同颜色。
方法一：传统CSS方式
1. 创建 Button.css
.my-button {
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.my-button.red {
background-color: red;
color: white;
}
.my-button.blue {
background-color: blue;
color: white;
}
2. 使用 Button 组件
import './Button.css'
import { useState } from 'react'
function MyButton({ label }) {
const [color, setColor] = useState('red')
return (
<button
className={`my-button ${color}`}
onClick={() => setColor(color === 'red' ? 'blue' : 'red')}
>
{label}
</button>
)
}
export default function App() {
return (
<div>
<MyButton label="切换颜色" />
</div>
)
}
✅ 运行后你会看到一个红色按钮，点击会变成蓝色。
方法二：CSS-in-JS 方式（使用 styled-components）
1. 安装和导入
确认已安装：
npm install styled-components
2. 修改代码：
import styled from 'styled-components'
import { useState } from 'react'
const StyledButton = styled.button`
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 4px;
cursor: pointer;
color: white;
background-color: ${props => props.color};
transition: background-color 0.3s ease;
&:hover {
opacity: 0.85;
}
`
function MyStyledButton({ label }) {
const [color, setColor] = useState('red')
return (
<StyledButton
color={color}
onClick={() => setColor(color === 'red' ? 'blue' : 'red')}
>
{label}
</StyledButton>
)
}
export default function App() {
return (
<div>
<MyStyledButton label="切换颜色" />
</div>
)
}
✅ 这个版本同样实现动态变色按钮，但所有样式都在 JS 文件中定义。
常见问题解答
Q1：我学哪个更好？CSS 还是 CSS-in-JS？
👉 如果你是新手，建议先掌握传统 CSS。因为它是所有前端开发的基础，而且很多项目仍在使用。
👉 如果你想深入 React 生态，或想提升组件封装能力，CSS-in-JS 是个不错的选择。
Q2：CSS-in-JS 性能好吗？
大部分情况下不会成为瓶颈。现代库优化很好。但在大型项目或极端场景下，纯 CSS 可能更快一点。
Q3：怎么避免类名冲突？
✔️ 传统 CSS 需要手动注意类名命名规范（BEM 等），容易出错。
✔️ CSS-in-JS 库自动帮你生成唯一类名，几乎不需担心冲突。
Q4：CSS-in-JS 会不会让 JS 文件太臃肿？
如果你把所有样式都写在一起，确实可能影响可读性。建议保持组件小而精，按需导入导出。
Q5：可以用多个 CSS-in-JS 库吗？
可以，但不推荐。选择其中一个统一使用更利于团队协作和后期维护。
学习建议：下一步怎么学？
✅ 先掌握的传统 CSS 技术栈（适合初学者）
- HTML 基础结构
- CSS 布局（Flexbox/Grid）
- 使用预处理器（如 SCSS / LESS）
- 掌握模块化 CSS（如 BEM 规范）
🔍 再探索 CSS-in-JS 技术栈（适合 React 开发者）
- 掌握 styled-components 或 emotion
- 理解主题系统（theme）
- 学会与 TypeScript 配合使用
- 尝试 CSS-in-JS 工具链配置（如 SSR 支持）
总结
通过本教程，你学会了：
- 什么是传统 CSS 与 CSS-in-JS；
- 如何搭建开发环境；
- 如何使用两种方式写样式；
- 动态样式的实现技巧；
- 常见疑问的解答；
- 后续学习路径建议。
无论你选择哪种方式，记住：写出来的代码要易于理解和维护才是最重要的。
继续练习吧！你可以尝试自己写一个简单的个人主页或者博客界面，尝试两种风格分别实现。很快你就能找到属于自己的最佳实践方式！
🎉 欢迎在评论区留言分享你的项目成果，也可以继续提问！祝你学习愉快，早日成为前端高手！
评论 0