CSS-in-JS vs 传统CSS：现代样式方案选择指南
开篇：我们为什么需要学习CSS和CSS-in-JS？
你有没有想过，为什么网页看起来那么漂亮？除了HTML结构之外，真正让网页“美”起来的是CSS（Cascading Style Sheets）。而随着前端技术的发展，又出现了另一种新的方式来写样式——CSS-in-JS。
在本教程中，我们将一起学习两种主流的样式方案：
- 传统CSS
- CSS-in-JS
我们会从零基础开始，通过简单易懂的语言、清晰的示例代码和实际的小项目帮助你了解它们各自的优缺点，并教你如何根据实际情况做出合适的选择。
环境准备：搭建我们的第一个开发环境
在开始写代码之前，我们需要先准备好开发环境。别担心，这并不复杂！
步骤1：安装Node.js和npm
我们要用到JavaScript的包管理工具npm，它随Node.js一起安装。
✅ 安装地址：https://nodejs.org
建议选择LTS版本（长期支持版），下载并安装即可。
安装完成后，在终端或命令行输入以下命令确认是否安装成功：
node -v
npm -v
如果能看到类似这样的输出：
v16.14.2
8.5.0
恭喜！你已经准备好了！
步骤2：创建一个React项目（用于CSS-in-JS）
CSS-in-JS最常见于React框架中。所以我们要先创建一个React项目。
使用以下命令快速创建一个React应用（请确保你的电脑联网）：
npx create-react-app css-in-js-demo
cd css-in-js-demo
npm start
等几秒钟后，浏览器会自动打开 http://localhost:3000 ，看到默认的React欢迎页面就说明项目创建成功了 ✅
核心概念：什么是传统CSS和CSS-in-JS？
为了更好地理解这两种技术的区别，我们可以打个比方：
想象你要为房子刷墙。
🏠 传统CSS就像是一张“调色板”，你在专门的地方配好颜色，再贴上去；
🧱 而CSS-in-JS则像是拿着一桶油漆直接在墙上画图案——一切都在JavaScript里完成。
一、传统CSS的工作原理
传统CSS是独立于HTML和JavaScript的样式文件。它通过类名、标签名等选择器控制页面样式的显示效果。
示例：
<!-- index.html -->
<p class="highlight">这是一段高亮文字</p>
/* styles.css */
.highlight {
background-color: yellow;
color: red;
}
这种方式简单直观，适合大多数静态网站。
✅ 优点：
- 学习成本低，社区资源丰富
- 可维护性较好，样式集中管理
❌ 缺点：
- 类名容易重复、冲突
- 维护大型项目时可能变得混乱
二、CSS-in-JS 的工作原理
CSS-in-JS 是一种将CSS写入JavaScript的方式，通常与React搭配使用。
比如使用 styled-components 或 emotion 这类库，可以直接在组件中定义样式。
示例：
// App.jsx
import styled from 'styled-components';
const Highlight = styled.p`
background-color: yellow;
color: red;
`;
function App() {
return (
<Highlight>这是一段高亮文字</Highlight>
);
}
export default App;
你会发现样式直接跟在组件旁边，更方便调试和重用。
✅ 优点：
- 样式和组件紧密结合，减少类名冲突
- 支持动态样式和主题设置
- 更好的模块化能力
❌ 缺点：
- 初学者可能觉得结构复杂
- 需要额外引入库，可能影响加载速度
实战项目：做一个小天气卡片组件
为了让大家更清楚两种方式的实际差别，我们来做个小项目：用传统CSS和CSS-in-JS分别实现一个天气卡片组件 💡
项目目标
做一个带天气信息的小卡片，如下图所示：
内容包括：
- 温度
- 天气描述
- 背景风格根据天气变化
方法1：用传统CSS实现
Step 1：修改 App.js
// src/App.js
import './WeatherCard.css';
function WeatherCard({ temperature, description, isSunny }) {
const weatherClass = isSunny ? 'sunny' : 'cloudy';
return (
<div className={`card ${weatherClass}`}>
<h2>{temperature}°C</h2>
<p>{description}</p>
</div>
);
}
export default function App() {
return (
<WeatherCard temperature={25} description="晴天" isSunny={true} />
);
}
Step 2：创建 WeatherCard.css
.card {
padding: 1rem;
border-radius: 8px;
color: white;
width: 200px;
text-align: center;
}
.sunny {
background-color: #ffcc00; /* 黄色背景 */
}
.cloudy {
background-color: #708090; /* 灰蓝色背景 */
}
运行一下看看结果 👀
方法2：用CSS-in-JS（styled-components）实现
Step 1：安装依赖
npm install styled-components
Step 2：编写组件
// src/App.js
import styled from 'styled-components';
const Card = styled.div`
padding: 1rem;
border-radius: 8px;
color: white;
width: 200px;
text-align: center;
background-color: ${props => props.isSunny ? '#ffcc00' : '#708090'};
`;
function WeatherCard({ temperature, description, isSunny }) {
return (
<Card isSunny={isSunny}>
<h2>{temperature}°C</h2>
<p>{description}</p>
</Card>
);
}
export default function App() {
return (
<WeatherCard temperature={25} description="晴天" isSunny={true} />
);
}
你会发现样式逻辑都写在一起，更加直观和灵活 ✨
常见问题解答（FAQ）
以下是初学者常问的一些问题👇
Q1：CSS-in-JS真的比传统CSS更好吗？
答：没有绝对的好坏之分。如果你做的是小型静态网站，传统CSS就够用了；但如果是React项目、组件多且复用率高，CSS-in-JS更适合。
Q2：使用CSS-in-JS会影响性能吗？
答：对普通项目影响不大。不过如果你特别在意加载速度，可以选择按需加载或使用轻量级库如 goober、linaria。
Q3：我要不要一开始就学CSS-in-JS？
答：不推荐哦！建议先掌握传统CSS的基础知识，比如盒模型、布局方法、响应式设计等，再过渡到CSS-in-JS会更容易理解。
Q4：CSS-in-JS会不会让代码难以维护？
答：只要你结构清晰、命名规范、保持良好的组件拆分习惯，其实是更容易维护的！
学习建议：接下来可以怎么学？
到这里，你应该已经能写出自己的第一个CSS-in-JS和传统CSS的小组件了。接下来可以从以下几个方向继续深入学习：
✅ 方向1：掌握更多CSS基础知识
- 掌握Flexbox、Grid布局
- 学习动画和过渡效果
- 使用媒体查询实现响应式设计
✅ 方向2：深入CSS-in-JS技巧
- 使用变量和主题功能（例如
ThemeProvider） - 动态生成样式（条件判断 + 模板字符串）
- 学习其他CSS-in-JS库如
emotion,styled-jsx,linaria
✅ 方向3：结合React实战项目
- 制作博客系统
- 构建任务管理器
- 实现购物车功能
- 探索组件库（如Ant Design、Material UI）背后的样式机制
总结：现在你知道该怎么选了吗？
| 对比维度 | 传统CSS | CSS-in-JS |
|---|---|---|
| 技术难度 | 较低 | 中等偏上 |
| 学习曲线 | 平缓 | 曲线稍陡 |
| 是否依赖框架 | 否 | 是（通常配合React） |
| 类名冲突风险 | 高 | 低 |
| 动态样式能力 | 弱 | 强 |
| 适合场景 | 静态页面、HTML/CSS学习者 | React项目、高复用组件 |
🎯 最终建议：
- 如果你是前端新手，优先学好传统CSS
- 如果你已掌握React开发，尝试CSS-in-JS以提升开发效率和可维护性
希望这篇教程能为你揭开CSS-in-JS的神秘面纱，并帮助你在未来项目中做出更好的选择。祝你学习愉快、代码越写越好 💻✨
评论 0