CSS-in-JS vs 传统CSS：现代样式方案选择指南
开篇：初识 CSS 和 CSS-in-JS
大家好！如果你是前端开发的新手，你可能已经听说过“CSS”这个词。CSS 是一种用于网页美化的语言，它可以帮助我们设计网站的外观，比如设置颜色、字体、布局等。
但随着技术的发展，出现了一种新的方式来写样式——CSS-in-JS。顾名思义，它就是把 CSS 写在 JavaScript 文件中，而不是单独使用 .css 文件。
这篇文章将带你了解：
- 什么是 CSS？
- 什么是 CSS-in-JS？
- 它们之间的区别
- 如何根据项目需求做出选择
我们将用最简单的语言和具体的例子，帮助你理解这些概念。即使你是零基础小白，也能轻松掌握！
环境准备：搭建你的学习环境
为了更好地理解 CSS 和 CSS-in-JS，我们需要一个可以动手练习的环境。以下是搭建步骤：
步骤1：安装 VS Code（代码编辑器）
VS Code 是目前最受欢迎的前端开发工具。你可以从 https://code.visualstudio.com/ 下载并安装。
步骤2：安装 Node.js
CSS-in-JS 框架通常用于 React 或 Vue 这样的现代框架中，所以我们需要先安装 Node.js 来运行这些工具。下载地址：https://nodejs.org/（推荐选择 LTS 版本）。
安装完成后，打开终端（Windows 使用 CMD 或 PowerShell），输入以下命令查看是否安装成功：
node -v
npm -v
你会看到类似如下输出：
v18.16.0
9.5.0
步骤3：创建一个 React 项目（用于 CSS-in-JS 示例）
我们使用 create-react-app 工具快速创建一个 React 项目：
npx create-react-app style-demo
cd style-demo
npm start
项目启动后，浏览器会自动打开 http://localhost:3000，你可以看到默认页面。
接下来，我们要安装两个常用的 CSS-in-JS 库来实践：
npm install styled-components
npm install emotion
这样我们的环境就准备好了，现在可以开始真正的学习了！
核心概念：CSS 与 CSS-in-JS 的基本原理
一、什么是传统 CSS？
CSS 全称是 Cascading Style Sheets（层叠样式表）。它的核心作用就是美化网页。
使用方式：
在 HTML 中引入外部 CSS 文件：
<link rel="stylesheet" href="style.css" />或者直接在 HTML 中使用内联样式：
<p style="color: red;">这是一段红色文字</p>
示例：传统 CSS 实战
新建一个文件 style.css：
.box {
width: 100px;
height: 100px;
background-color: blue;
color: white;
text-align: center;
line-height: 100px;
border-radius: 10px;
}
然后在 index.html 的 <body> 中添加：
<div class="box">Hello</div>
效果就是在网页上显示一个蓝色方块，里面有“Hello”字样。
✅ 优点：
- 简单易学
- 大多数浏览器都兼容
🚫 缺点：
- 样式容易冲突
- 大型项目难管理
- 无法利用 JS 的逻辑能力
二、什么是 CSS-in-JS？
CSS-in-JS 就是在 JavaScript 文件中编写 CSS 样式，并通过一些库来实现渲染。
常见的 CSS-in-JS 库有：
- styled-components
- emotion
- jss
这些库的本质都是帮你把 CSS 转成 JS 变量，再动态插入到网页中。
使用方式：
以 styled-components 为例：
npm install styled-components
然后在 App.js 中写：
import styled from 'styled-components';
const Box = styled.div`
width: 100px;
height: 100px;
background-color: blue;
color: white;
text-align: center;
line-height: 100px;
border-radius: 10px;
`;
function App() {
return (
<Box>Hello</Box>
);
}
export default App;
运行结果也一样是一个蓝色盒子。
✅ 优点：
- 动态样式（可以根据变量变化）
- 避免类名冲突
- 更适合组件化开发（如 React/Vue）
🚫 缺点：
- 学习成本略高
- 打包体积可能稍大
- 需要构建工具支持
三、两者的核心区别总结
| 特性 | 传统 CSS | CSS-in-JS |
|---|---|---|
| 编写位置 | 单独文件（.css） |
JavaScript 文件内部 |
| 是否动态 | 否 | 是（可配合变量） |
| 类名冲突 | 容易发生 | 一般不会（自动命名） |
| 组件化程度 | 低 | 高（更适合 React/Vue） |
| 学习门槛 | 低 | 中 |
实战项目：对比两种方式实现一个按钮组件
我们来做一个简单的项目，分别用传统 CSS 和 CSS-in-JS 方式实现同一个按钮组件，直观感受它们的区别。
项目目标：
创建一个按钮组件，要求：
- 默认背景为蓝色
- hover 时变浅蓝
- 支持传入自定义文本和点击事件
方法1：使用传统 CSS
1. 创建 Button.css
.my-button {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.my-button:hover {
background-color: #40a0ff;
}
2. 创建 Button.jsx
import './Button.css';
function Button({ text, onClick }) {
return (
<button className="my-button" onClick={onClick}>
{text}
</button>
);
}
export default Button;
3. 在 App.js 中使用：
import Button from './Button';
function App() {
const handleClick = () => alert('按钮被点击了！');
return (
<div>
<Button text="点击我" onClick={handleClick} />
</div>
);
}
export default App;
方法2：使用 CSS-in-JS（以 styled-components 为例）
1. 修改 App.js
import styled from 'styled-components';
const MyButton = styled.button`
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
&:hover {
background-color: #40a0ff;
}
`;
function App() {
const handleClick = () => alert('按钮被点击了！');
return (
<div>
<MyButton onClick={handleClick}>点击我</MyButton>
</div>
);
}
export default App;
总结一下体验：
- 传统 CSS：结构清晰，适合熟悉 HTML/CSS 的开发者。
- CSS-in-JS：写法更统一（CSS + JSX 一体化），组件风格更容易控制，尤其是在复杂应用中优势明显。
常见问题解答（FAQ）
Q1：CSS-in-JS 是不是必须用在 React 上？
A：不完全是。虽然 CSS-in-JS 最常与 React 或 Vue 配合使用，但也有一些可以在原生 JS 项目中使用的库。不过大多数情况下，它确实是为了组件化开发而生的。
Q2：CSS-in-JS 会不会影响性能？
A：正常合理使用下影响不大。某些库会在首次加载时生成 <style> 标签，但如果用得好（比如按需加载、避免重复组件），性能差异几乎不可见。
Q3：我应该选择哪个方式来开发自己的项目？
A：看你的项目类型：
- 如果你是刚入门，建议从传统 CSS 开始学习；
- 如果你正在使用 React/Vue 构建组件化项目，建议尝试 CSS-in-JS；
- 未来想深入大型前端项目，建议掌握 CSS-in-JS 工具。
学习建议：下一步该怎么做？
恭喜你走到了这一步！你现在掌握了 CSS 和 CSS-in-JS 的基本概念，并且完成了实战项目。
推荐学习路径：
第一步：巩固 CSS 基础
- 学习 CSS 盒子模型、Flex 布局、Grid 布局
- 理解响应式设计和媒体查询
- 练习自己做几个小页面，比如登录页、卡片列表等
第二步：进入前端框架
- 学习 React 或 Vue，掌握组件开发思想
- 结合 CSS-in-JS 技术提升组件封装能力
第三步：深入了解 CSS-in-JS
- 研究更多进阶功能：主题系统、条件样式、关键帧动画等
- 对比不同 CSS-in-JS 库的优缺点（例如 styled-components vs emotion）
第四步：参与真实项目
- 加入开源项目，或者尝试做个自己的博客/作品集网站
- 尝试模块化开发和团队协作
结语：选择没有对错，只有合适与否
CSS 和 CSS-in-JS 并没有绝对的好坏之分，关键在于你所处的场景。
- 初学者可以先从传统 CSS 入门；
- 熟悉组件开发后，CSS-in-JS 将成为你强有力的武器；
- 保持开放的心态，多尝试新技术才是成长为优秀前端工程师的关键。
希望这篇教程能为你打开通往现代前端世界的大门。继续加油吧，未来可期 🚀！
如果你觉得这篇内容对你有帮助，欢迎点赞或分享给其他初学者！我们一起成长 💪😊
评论 0