CSS-in-JS vs 传统CSS：现代样式方案选择指南
开篇：什么是CSS？它又有哪些新玩法？
在网页开发中，**CSS（层叠样式表）**是我们用来给网页“化妆”的工具。你可以把它想象成一套“美颜滤镜”，比如让文字变大、背景变色、按钮圆角等等。
但随着网站越来越复杂，传统的CSS方式也暴露出一些问题。于是，一种新的写法应运而生 —— CSS-in-JS，意思是：把原本单独写的样式代码直接写进 JavaScript 文件里！
在这篇教程中，我们将从零开始，带你认识两种主流的写法：
- 传统CSS
- CSS-in-JS
并通过一个简单的小项目，对比它们的使用方法和优缺点，让你了解到底应该选哪种方式来写样式。
环境准备：搭建属于你的前端开发小窝
在开始前，我们需要准备好一个基本的开发环境，就像做蛋糕要先有烤箱一样 😊
步骤 1：安装 Node.js 和 npm
👉 访问 https://nodejs.org
👉 下载并安装 LTS 版本（推荐）
验证是否安装成功，在命令行输入：
node -v
npm -v
你会看到类似这样输出（版本号可能不同）：
v18.16.0
9.5.1
步骤 2：创建一个新的项目目录
打开终端（Mac）或命令提示符（Windows），输入：
mkdir styles-tutorial
cd styles-tutorial
npm init -y
这会自动创建一个 package.json 文件，记录我们项目的配置信息。
步骤 3：安装 React（我们将在实战部分用到）
npx create-react-app my-app
cd my-app
npm start
等待几秒钟后，浏览器会自动打开一个默认页面，说明React环境已经准备好啦！
💡 小贴士：如果你还没学React也没关系，接下来我们会简单讲解所需概念。
核心概念：什么是传统CSS？什么是CSS-in-JS？
我们现在来分别看看这两种写法到底是怎么回事！
一、传统CSS：最经典的写法
这是我们最早接触的写样式的方式。它的特点是：
- 样式写在一个
.css文件里 - HTML 文件通过
<link>或class来引入样式 - 所有组件可以共享这些样式（方便统一风格）
- 需要特别注意样式名不要重复（容易出错）
示例：
文件结构：
my-app/
├── App.js
├── App.css
App.js：
import './App.css';
function App() {
return (
<div className="container">
<h1 className="title">你好，我是传统CSS</h1>
</div>
);
}
export default App;
App.css：
.container {
background-color: #f4f4f4;
padding: 20px;
text-align: center;
}
.title {
color: blue;
}
二、CSS-in-JS：把样式写进JS里！
顾名思义，就是把样式直接写进 JS 文件中，比如使用库如 styled-components 或 emotion。
这种写法的主要优点包括：
- 模块化：每个组件自带样式，不会污染全局
- 可动态控制样式：根据状态实时修改样式更方便
- 无需担心类名冲突
示例：使用 styled-components
第一步：安装依赖：
npm install styled-components
App.js：
import styled from 'styled-components';
// 创建带样式的组件
const Container = styled.div`
background-color: #f4f4f4;
padding: 20px;
text-align: center;
`;
const Title = styled.h1`
color: green;
`;
function App() {
return (
<Container>
<Title>你好，我是CSS-in-JS</Title>
</Container>
);
}
export default App;
是不是很像写HTML标签？但我们在这里定义了带有样式的组件。
三、关键对比总结
| 对比项 | 传统CSS | CSS-in-JS |
|---|---|---|
| 学习难度 | 入门简单 | 需掌握JS基础 + 库 |
| 样式管理 | 可能出现命名冲突 | 自动生成唯一类名 |
| 动态样式支持 | 操作困难，需手动处理 | 支持动态传值，灵活强大 |
| 性能 | 轻量高效 | 略重，但大多数场景无明显差异 |
| 是否适合大型项目 | 合理组织可支持 | 更利于组件化架构 |
实战项目：做一个天气卡片组件 🌤️
为了更好地体会两者的区别，我们来一起实现一个简单的“天气卡片”。
目标效果：
- 显示温度、天气状况
- 根据天气情况动态改变背景颜色（晴天/下雨/雪天）
方式一：用传统CSS实现
文件结构：
my-app/
├── components/WeatherCard.js
├── components/WeatherCard.css
WeatherCard.js：
import './WeatherCard.css';
function WeatherCard({ temp, condition }) {
return (
<div className={`card ${condition}`}>
<h2>{temp}°C</h2>
<p>{condition}</p>
</div>
);
}
export default WeatherCard;
WeatherCard.css：
.card {
width: 200px;
padding: 20px;
border-radius: 10px;
color: white;
font-family: sans-serif;
text-align: center;
}
.sunny {
background-color: yellow;
}
.rainy {
background-color: #4a90e2;
}
.snowy {
background-color: lightblue;
}
最后，在 App.js 中使用：
import WeatherCard from './components/WeatherCard';
function App() {
return (
<div>
<WeatherCard temp={25} condition="sunny" />
<WeatherCard temp={12} condition="rainy" />
<WeatherCard temp={-5} condition="snowy" />
</div>
);
}
方式二：用CSS-in-JS实现（以 styled-components 为例）
安装库（如果之前没装）：
npm install styled-components
WeatherCard.js：
import styled from 'styled-components';
const Card = styled.div`
width: 200px;
padding: 20px;
border-radius: 10px;
color: white;
font-family: sans-serif;
text-align: center;
background-color: ${(props) => {
switch (props.condition) {
case 'sunny':
return 'yellow';
case 'rainy':
return '#4a90e2';
case 'snowy':
return 'lightblue';
default:
return 'white';
}
}};
`;
function WeatherCard({ temp, condition }) {
return (
<Card condition={condition}>
<h2>{temp}°C</h2>
<p>{condition}</p>
</Card>
);
}
export default WeatherCard;
✅ 注意看！我们用了模板字符串配合变量来返回不同的
background-color，非常灵活。
对比小结：
| 能力 | 传统CSS | CSS-in-JS |
|---|---|---|
| 动态背景色 | 不易实现 | 简单直观，直接在JS里判断条件 |
| 组件独立性 | 需人为确保不重复类名 | 自动生成唯一标识，天然组件级隔离 |
| 可维护性 | 类多时难以管理 | 每个组件样式都在同一文件中，清晰可见 |
常见问题解答：新手常遇到的问题汇总
❓ Q1：CSS-in-JS 是不是比传统CSS更好？
✅ 没有绝对答案。各有优劣。
- 适合团队协作、大型项目时，CSS-in-JS更易于管理和扩展；
- 如果是学习阶段或者小型项目，传统CSS更容易上手。
❓ Q2：CSS-in-JS 的性能会不会差很多？
✅ 大多数实际项目中，性能差别几乎可以忽略。现代框架（如React）+ CSS-in-JS库（如styled-components）优化得很好。
❓ Q3：我该学哪个？
✅ 建议你两个都试试：
- 学完基础HTML/CSS之后，先掌握传统CSS；
- 再去学习React时尝试CSS-in-JS，两者都可以成为你技能包的一部分。
❓ Q4：CSS-in-JS 是必须用React的吗？
❌ 不一定，也有非React的CSS-in-JS库，比如 Emotion 的通用版。
不过目前最流行的是与React结合使用。
❓ Q5：能不能混着用？
✅ 完全可以！
你可以为部分组件使用CSS-in-JS，其它地方继续用传统CSS，互不影响。
学习建议：下一步怎么走？
现在你已经有了对两种方式的初步理解，下面是一些实用的学习路径建议：
🎯 初学者建议路线
先学基础HTML和CSS
- 推荐资源：MDN Web Docs
- 熟悉盒模型、布局、伪类、响应式设计等
再过渡到JavaScript + React
- 推荐官网：React官方文档
- 重点掌握组件、props、state的概念
然后深入CSS-in-JS
- 入门首选：styled-components
- 也可以试试 emotion、goober 等库
练习构建真实项目
- Todo List、天气应用、电商卡片展示
- 结合路由和状态管理（如Redux）加深理解
📘 推荐练习项目清单
| 项目类型 | 技术要求 | 建议顺序 |
|---|---|---|
| 个人简历页面 | HTML + CSS | 第一步 |
| ToDo任务管理器 | React + CSS | 第二步 |
| 博客列表系统 | React + CSS-in-JS | 第三步 |
| 用户认证系统 | React + CSS-in-JS + API调用 | 第四步 |
结语：选择适合自己才是最好的
这篇文章我们从头开始，介绍了传统CSS和CSS-in-JS这两种写样式的方法，并通过一个小项目进行了实践对比。
作为初学者，你不需要立刻做出决定要用哪种方式，而是应该根据自己的需求和学习进度来选择合适的方式。
记住一句话：
“写得清楚，看得明白，改得轻松”的代码，才是好代码。
无论你选择哪一种方式，只要勤加练习，都能写出优秀的前端代码！
祝你在前端道路上越走越远！如果有任何疑问，欢迎留言交流。 👋😊
评论 0