从培训班出来后，我才明白：CSS-in-JS 和传统 CSS 到底该怎么选？
大家好，我是阿杰，一个刚从前端培训班毕业半年、现在在一家小公司做初级开发的“过来人”。还记得我当初学 CSS 的时候，被各种样式冲突、命名混乱搞得焦头烂额。后来听说“CSS-in-JS”很火，就一头扎进去，结果又踩了不少坑。今天这篇教程，就是想用我亲身经历过的困惑和实践，带零基础的朋友搞清楚：传统 CSS 和 CSS-in-JS，到底该用哪个？
这篇文章不讲玄乎的概念，直接上项目案例 + 代码对比，让你看完就能动手试试！
一、先搞懂：它们到底是啥？
传统 CSS 是什么？
就是你在 HTML 里写 <link rel="stylesheet" href="style.css">，然后在 .css 文件里写样式。这是最经典的方式，简单直接。
<!-- index.html -->
<div class="card">Hello World</div>
/* style.css */
.card {
background: #f0f0f0;
padding: 16px;
border-radius: 8px;
}
CSS-in-JS 又是什么？
顾名思义，就是“把 CSS 写在 JavaScript 里”。比如用 styled-components 这个库：
// App.jsx
import styled from 'styled-components';
const Card = styled.div`
background: #f0f0f0;
padding: 16px;
border-radius: 8px;
`;
function App() {
return <Card>Hello World</Card>;
}
看起来只是写法不同？但背后的设计理念、工程化能力差别巨大！
二、环境准备：5 分钟搭好开发环境
我们用 Vite + React 来快速搭建项目（别担心，Vite 比 Webpack 简单多了）。
步骤 1：安装 Node.js
去 nodejs.org 下载 LTS 版本，安装即可。
步骤 2：创建项目
打开终端，执行：
npm create vite@latest my-style-demo -- --template react
cd my-style-demo
npm install
步骤 3：安装 CSS-in-JS 库（可选）
如果你想尝试 CSS-in-JS，装 styled-components：
npm install styled-components
💡 开发心得：我当初学的时候，死磕 Webpack 配置，花了三天都跑不起来。后来老师说：“新手先用 Vite，别被工具链劝退！” 果然，Vite 一行命令搞定，省心！
三、核心概念对比：用最简单的语言讲清楚
| 对比维度 | 传统 CSS | CSS-in-JS（以 styled-components 为例） |
|---|---|---|
| 作用域 | 全局作用域，容易冲突 | 自动局部作用域，避免命名污染 |
| 动态样式 | 需要 JS 操作 class 或 style | 直接传 props 控制样式 |
| 代码组织 | 样式和逻辑分离 | 样式紧贴组件，高内聚 |
| 调试体验 | 浏览器 DevTools 直接看 | 生成随机 class 名，调试略麻烦 |
| 学习成本 | 极低，零基础也能上手 | 需理解 JS 模板字符串、高阶组件等概念 |
关键点解释：
- 作用域问题：传统 CSS 中，如果你写了
.button，全站所有.button都会受影响。而 CSS-in-JS 自动生成类似.sc-hKgILt.cXxYz这样的唯一类名，互不干扰。 - 动态样式：比如按钮颜色根据状态变化。传统做法是切换 class；CSS-in-JS 可以直接写：
const Button = styled.button` background: ${props => props.primary ? 'blue' : 'gray'}; `; // 使用：<Button primary>Click</Button>
四、实战项目：做一个“主题切换卡片”
我们来做一个小 demo：点击按钮切换卡片主题（亮色/暗色）。分别用传统 CSS 和 CSS-in-JS 实现，你就能感受到差异。
项目结构
my-style-demo/
├── public/
├── src/
│ ├── components/
│ │ ├── CardTraditional.jsx ← 传统 CSS 方案
│ │ └── CardStyled.jsx ← CSS-in-JS 方案
│ ├── styles/
│ │ └── card.css ← 传统 CSS 文件
│ └── App.jsx
方案一：传统 CSS 实现
1. 写 CSS 文件
/* src/styles/card.css */
.card {
padding: 20px;
border-radius: 10px;
transition: background 0.3s;
}
.card.light {
background: #ffffff;
color: #333;
}
.card.dark {
background: #333;
color: #fff;
}
2. 写组件
// src/components/CardTraditional.jsx
import '../styles/card.css';
export default function CardTraditional({ isDark }) {
return (
<div className={`card ${isDark ? 'dark' : 'light'}`}>
这是传统 CSS 卡片
</div>
);
}
3. 在 App 中使用
// src/App.jsx
import { useState } from 'react';
import CardTraditional from './components/CardTraditional';
function App() {
const [isDark, setIsDark] = useState(false);
return (
<div>
<button onClick={() => setIsDark(!isDark)}>
切换主题
</button>
<CardTraditional isDark={isDark} />
</div>
);
}
✅ 优点：直观、易调试、适合静态页面
❌ 缺点：需要手动管理 class 名，容易命名冲突（比如别人也写了 .card）
方案二：CSS-in-JS 实现
1. 写组件
// src/components/CardStyled.jsx
import styled from 'styled-components';
const StyledCard = styled.div`
padding: 20px;
border-radius: 10px;
transition: background 0.3s;
background: ${props => props.isDark ? '#333' : '#fff'};
color: ${props => props.isDark ? '#fff' : '#333'};
`;
export default function CardStyled({ isDark }) {
return (
<StyledCard isDark={isDark}>
这是 CSS-in-JS 卡片
</StyledCard>
);
}
2. 在 App 中使用
// src/App.jsx（替换组件导入）
import CardStyled from './components/CardStyled';
// ...其他代码不变
<CardStyled isDark={isDark} />
✅ 优点：样式与组件绑定，无全局污染，动态样式写法简洁
❌ 缺点：需要额外依赖，打包体积略大，DevTools 看不到清晰 class 名
🔍 Embedding 小知识：其实 CSS-in-JS 的本质是一种“样式嵌入”（Embedding）技术——把样式逻辑嵌入到组件内部。这和我们在 LLM 中做文本 Embedding 类似：都是把分散的信息“打包”到一个上下文中，避免外部干扰。
五、新手常见问题解答
Q1：我该学哪个？是不是 CSS-in-JS 更先进？
答：不是“先进与否”，而是“场景适配”。
- 如果你做简单页面、营销落地页 → 传统 CSS 足够
- 如果你做复杂应用（如后台系统、SPA）→ CSS-in-JS 更利于维护
Q2：CSS-in-JS 会影响性能吗？
答：现代库（如 styled-components v6）做了大量优化，运行时开销极小。除非极端场景，否则不必担心。
Q3：能不能混用？
答：完全可以！很多项目是“传统 CSS + CSS-in-JS”混合模式。比如全局重置样式用传统 CSS，组件样式用 CSS-in-JS。
Q4：我看到 GitHub 上很多项目用 Tailwind CSS，那又是什么？
答：Tailwind 是另一种思路——“原子化 CSS”。它不属于传统 CSS 也不属于 CSS-in-JS，而是通过 class 组合实现样式。建议先掌握基础再学它。
六、避坑指南 & 学习建议
我踩过的坑：
- 盲目追新：刚学完 CSS 就跑去学 CSS-in-JS，结果连盒模型都没搞懂。
- 过度封装：为了用 styled-components，把简单 div 也包装成 styled.Div，代码反而更臃肿。
- 忽略浏览器兼容：某些 CSS-in-JS 库对老浏览器支持不好，上线前务必测试。
下一步怎么学？
- 巩固基础：确保你理解 CSS 盒模型、选择器、层叠规则。
- 动手改项目：把你之前的静态页面，分别用两种方式重写一遍。
- 研究开源项目：去 GitHub 搜
styled-components example或react css best practice，看看高手怎么组织代码。 - 了解 RAG 思维（Bonus）：虽然 RAG（检索增强生成）常用于 AI，但它的思想也可以用在前端——比如“当我不知道某个样式怎么写时，去 MDN 或 GitHub 搜最佳实践”，这就是一种“人工 RAG”。
🌟 最后的心得：技术没有银弹。培训班老师常说：“工具是为人服务的，不是人被工具绑架。” 无论选哪种方案，目标都是写出可维护、可读、高效的代码。别纠结“哪个更好”，多写、多试、多反思，才是成长的关键。
七、附录：常用命令速查表
| 场景 | 命令 |
|---|---|
| 创建 Vite 项目 | npm create vite@latest my-app -- --template react |
| 安装 styled-components | npm install styled-components |
| 启动开发服务器 | npm run dev |
| 构建生产包 | npm run build |
希望这篇教程能帮你少走弯路！如果你觉得有用，欢迎去我的 GitHub 点个 star（假装有 😄）。有问题也可以在评论区留言，我会尽力解答。
记住：每个大神，都曾是从 Hello World 开始的。加油！
评论 0