CSS-in-JS 与传统 CSS：现代样式方案选择指南（面向零基础初学者）
🌱 开篇：什么是CSS和CSS-in-JS？
如果你正在学习前端开发，你一定听说过 CSS 这个词。它全称是 Cascading Style Sheets，中文意思是“层叠样式表”。它是用来控制网页外观的，比如颜色、字体、间距、按钮形状等。
但近年来，一种新的写样式的方式越来越流行 —— CSS-in-JS。它把样式直接写进JavaScript代码中，而不是单独用.css文件来管理。
这篇文章将带你从零开始了解这两种方式，包括：
- 它们分别是什么？
- 怎么使用？
- 各自优缺点是什么？
- 哪种更适合新手或项目？
⚙️ 环境准备：搭建开发环境
在正式开始写代码之前，我们需要一个基本的开发环境。这里我们以使用React为例（因为CSS-in-JS框架大多配合React使用）。
步骤1：安装Node.js
前往 https://nodejs.org 下载并安装 LTS版本（长期支持版），这是最稳定的版本。
验证是否安装成功：在命令行输入：
node -v
npm -v
你会看到类似输出，说明安装成功。
步骤2：创建React项目
我们将使用 create-react-app 来快速生成项目结构。
执行以下命令：
npx create-react-app css-comparison-tutorial
cd css-comparison-tutorial
步骤3：启动开发服务器
运行下面命令：
npm start
浏览器会自动打开，显示React的欢迎页面。
接下来我们就在这个项目里练习两种写样式的方式！
🔑 核心概念：传统CSS VS CSS-in-JS
为了更好地理解两者的区别，我们先来看几个关键点。
✅ 传统CSS 的工作原理
传统CSS是独立于HTML和JavaScript的一种样式语言。你在.css文件里写样式规则，然后通过HTML的class属性绑定到元素上。
例如：
<!-- App.css -->
.container {
background-color: #f0f0f0;
padding: 20px;
}
// App.jsx 或 App.js
import './App.css';
function App() {
return (
<div className="container">
Hello, 我是一个容器！
</div>
);
}
export default App;
💡 注意：HTML中使用的是
className，不是class，这是因为JSX语法中关键字冲突了。
✅ CSS-in-JS 是什么？
CSS-in-JS 是一种“把CSS样式当成JavaScript对象来写”的方式。你可以直接在组件中定义样式，不再需要单独的.css文件。
常见的CSS-in-JS库有：styled-components、emotion、JSS 等等。我们以其中最常用的 styled-components 为例。
使用 styled-components 写样式
首先安装它：
npm install styled-components
然后在你的组件文件中导入并使用它：
import styled from 'styled-components';
const Container = styled.div`
background-color: #f0f0f0;
padding: 20px;
`;
function App() {
return (
<Container>
Hello，我是一个用 styled-components 写的容器！
</Container>
);
}
export default App;
看起来是不是很像写HTML？只是这里是直接在JS里写的CSS。
🧪 实战项目：做一个简单的卡片组件
现在我们来实战一下，写一个卡片（Card）组件，分别用 传统CSS 和 CSS-in-JS 两种方式实现。
目标效果
- 卡片背景白色，边框圆角，有内边距和阴影
- 顶部标题加粗，下面有一段文字描述
- 鼠标悬停时增加阴影效果
第一步：使用传统CSS方式实现
1. 创建样式文件
新建文件：Card.css
.card {
background-color: white;
border-radius: 8px;
padding: 16px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease;
}
.card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.title {
font-weight: bold;
margin-bottom: 8px;
}
2. 创建组件文件
修改 Card.js 文件：
import React from 'react';
import './Card.css';
function Card({ title, content }) {
return (
<div className="card">
<h3 className="title">{title}</h3>
<p>{content}</p>
</div>
);
}
export default Card;
3. 在 App.js 中使用
修改 App.js，引入并使用这个组件：
import React from 'react';
import Card from './Card';
function App() {
return (
<div style={{ padding: '20px' }}>
<Card title="欢迎学习CSS" content="这是一个传统的CSS卡片示例。"/>
</div>
);
}
export default App;
保存后刷新页面，你应该能看到一个带样式的卡片。
第二步：用 styled-components 实现相同效果
1. 安装依赖（如果没安装过）
npm install styled-components
2. 修改 Card.js
现在我们不用 .css 文件，全部在JS里面搞定：
import React from 'react';
import styled from 'styled-components';
const CardStyle = styled.div`
background-color: white;
border-radius: 8px;
padding: 16px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease;
&:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
`;
const Title = styled.h3`
font-weight: bold;
margin-bottom: 8px;
`;
function Card({ title, content }) {
return (
<CardStyle>
<Title>{title}</Title>
<p>{content}</p>
</CardStyle>
);
}
export default Card;
3. 修改 App.js（保持不变）
import React from 'react';
import Card from './Card';
function App() {
return (
<div style={{ padding: '20px' }}>
<Card title="欢迎学习CSS-in-JS" content="这是一个 styled-components 实现的卡片示例。"/>
</div>
);
}
export default App;
刷新页面，你会发现效果一模一样！
🤔 常见问题 & 解答
以下是新手常遇到的问题，帮你避开一些坑：
❓Q1：为什么用CSS-in-JS而不是传统CSS？
优点：
- 样式和组件耦合在一起，结构更清晰（特别是大型项目）
- 不会有全局样式冲突，因为你是在组件内部写的
- 支持动态样式（比如根据 props 变化调整样式）
缺点：
- 初学上手稍复杂（要熟悉模板字符串和ES6+语法）
- 构建打包时间略长一点（对新手几乎没影响）
❓Q2：传统CSS有什么好处？
- 上手简单，适合静态页面、小型项目
- 学习资料丰富，社区广泛接受
- 兼容性好，几乎所有框架都支持
❓Q3：新手到底该选哪一种？
| 项目类型 | 推荐技术 |
|---|---|
| 小型静态网站 | 传统CSS |
| React/Vue项目 | CSS-in-JS（如styled-components） |
| 复杂交互应用 | CSS-in-JS + Tailwind/CSS模块化 |
💡 建议：先掌握传统CSS，再尝试CSS-in-JS。
❓Q4：为什么我的样式不生效？
- 检查是否正确导入
.css文件 - 检查是否拼错类名（
class≠className） - 如果用了CSS-in-JS，确认是否正确导出样式变量并作为标签使用
- 是否被其他样式覆盖（可以使用浏览器开发者工具检查）
❓Q5：怎么调试样式？
使用浏览器右键 → “检查” → 找到对应DOM节点 → 查看“Styles”面板即可实时查看和调试样式。
🛠 学习建议：下一步怎么走？
恭喜你完成了第一课样式对比实践教程！你已经掌握了两种主流写样式的方法。接下来你可以这样继续学习：
✅ 推荐学习路径
巩固传统CSS基础：
- 盒子模型、布局（Flex/Grid）
- 动画与过渡
- 响应式设计
尝试更多CSS-in-JS框架：
- emotion
- stitches.dev （更快、更轻量）
- Tailwind + React（结合实用工具类）
深入React开发：
- 状态管理（useState, useContext）
- 组件通信与props传递
- 自定义Hook
项目实战：
- 做一个Todo List
- 实现一个电影推荐小站
- 编写自己的UI组件库
🎓 总结回顾
在这篇文章中，我们从零开始了解了：
- 传统CSS 和 CSS-in-JS 的基本写法
- 如何用两种方式分别写出一个卡片组件
- 各自有啥优点和适用场景
- 新手常踩的坑以及解决办法
无论你未来选择哪种方式写样式，最重要的是理解它们背后的原理和适用场景。希望你能大胆尝试，在实践中不断提高！
📌 小贴士：坚持每天写一点点代码，进步比你想象得快得多！
如果你觉得这篇文章有用，不妨分享给身边的朋友一起学习 ❤️
文末作业（可选）： 请仿照上面的卡片组件，试着做一个“按钮组件”，分别用传统CSS和CSS-in-JS方式实现，并添加一个点击动效（比如按下变色）。完成后欢迎留言交流 👇
评论 0