CSS-in-JS vs 传统CSS：现代样式方案选择指南
开篇：什么是样式处理方式？
在前端开发中，网页的样式设计是至关重要的部分。我们常见的做法是用“CSS”文件来定义网页元素的颜色、大小、排版等外观效果。
但随着React、Vue等现代框架的发展，一种新的样式管理方式——**CSS-in-JS（将CSS写进JavaScript代码中）**逐渐流行起来。它允许我们以更加灵活和组件化的方式来控制页面样式。
那么问题来了：作为初学者，我们应该怎么选择？是继续使用传统的CSS方式，还是尝试新的CSS-in-JS呢？
本教程将带你从零基础出发，对比这两种方法的优劣，并通过实际项目帮助你掌握它们的基本用法。
环境准备：搭建你的开发环境
第一步：安装 Node.js 和 npm
Node.js 是一个 JavaScript 运行平台，npm 是它的包管理器。我们需要它来安装 CSS-in-JS 的工具。
步骤如下：
- 打开浏览器，访问 https://nodejs.org
- 下载并安装 LTS 版本
- 安装完成后，打开命令行终端，输入以下命令：
node -v
npm -v
如果看到版本号输出，说明安装成功！
第二步：创建一个 React 项目（用于实践）
我们将用 React 来演示 CSS-in-JS 的使用场景。如果你对 React 不熟悉也没关系，跟着做就行。
执行以下命令：
npx create-react-app css-in-js-demo
cd css-in-js-demo
npm start
等待几秒钟后，你应该会在浏览器看到默认的 React 页面。
核心概念：传统CSS与CSS-in-JS的区别
一、传统CSS简介
CSS 全称 Cascading Style Sheets（层叠样式表），它是 Web 中专门用来设置页面样式的语言。
使用方式：
通常我们会写一个 .css 文件，然后在 HTML 或 React 组件中引入它。
示例：写一个按钮样式（traditional.css）
.my-button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
然后在 React 中使用：
import './traditional.css';
function Button() {
return <button className="my-button">点击我</button>;
}
特点总结：
- 简单直观，适合初学者
- 所有样式统一管理
- 依赖类名绑定到 DOM 元素上
- 潜在的问题是容易产生类名冲突或全局污染
二、CSS-in-JS简介
CSS-in-JS 就是在 JavaScript 文件中直接写 CSS 样式，并将它们绑定到组件上。这种方式让组件更独立、复用性更强、样式更可控。
常见的 CSS-in-JS 工具包括：
- styled-components
- emotion
- JSS
- Material UI 的
sx系统
我们将重点介绍目前最流行的两个：styled-components 和 emotion，并在后面进行实战对比。
示例：用 styled-components 写一个按钮
安装：
npm install styled-components
代码：
import styled from 'styled-components';
const MyButton = styled.button`
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
`;
function Button() {
return <MyButton>点击我</MyButton>;
}
这个写法看起来像是把 CSS 放进了 JS 中，这就是所谓的 CSS-in-JS！
对比总结（适合初学者的理解）：
| 方面 | 传统CSS | CSS-in-JS |
|---|---|---|
| 学习曲线 | 简单 | 稍微复杂一点 |
| 是否需要额外工具 | 否 | 是（如 styled-components） |
| 类名是否会冲突 | 可能会 | 不会（自动命名） |
| 是否支持条件样式 | 需手动判断 | 更加方便 |
| 是否适合组件复用 | 一般 | 非常好 |
实战项目：制作一个按钮组件库
我们将分别用传统CSS和CSS-in-JS实现一个简单的按钮组件库，并比较两者的区别。
第一步：传统CSS方式实现
1. 创建 TraditionalButton.css
.default-btn {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
margin: 10px;
}
.danger-btn {
background-color: red;
}
2. 在组件中使用
// TraditionalButton.js
import './TraditionalButton.css';
function TraditionalButton({ type = "default", children }) {
const className = type === "danger" ? "default-btn danger-btn" : "default-btn";
return <button className={className}>{children}</button>;
}
export default TraditionalButton;
3. 在 App.js 中使用
// App.js
import TraditionalButton from './TraditionalButton';
function App() {
return (
<div>
<TraditionalButton type="default">默认按钮</TraditionalButton>
<TraditionalButton type="danger">危险按钮</TraditionalButton>
</div>
);
}
运行结果就是两个不同颜色的按钮。
第二步：CSS-in-JS方式实现（使用 styled-components）
1. 安装依赖
npm install styled-components
2. 创建组件文件 StyledButton.js
import styled from 'styled-components';
const BaseButton = styled.button`
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
margin: 10px;
`;
const PrimaryButton = styled(BaseButton)`
background-color: #007bff;
`;
const DangerButton = styled(BaseButton)`
background-color: red;
`;
export { PrimaryButton, DangerButton };
3. 在 App.js 中使用
// App.js
import { PrimaryButton, DangerButton } from './StyledButton';
function App() {
return (
<div>
<PrimaryButton>主按钮</PrimaryButton>
<DangerButton>危险按钮</DangerButton>
</div>
);
}
总结对比
| 要素 | 传统CSS | CSS-in-JS |
|---|---|---|
| 代码模块化 | 弱（多个类名） | 强（组件拆分明确） |
| 条件样式 | 需要拼接类名 | 直接继承基础组件 |
| 命名冲突风险 | 有 | 几乎没有 |
| 初学者友好度 | 更高 | 稍低，但学习后更灵活 |
常见问题解答（FAQ）
1. 为什么我写的CSS不起作用？
可能是类名写错了，或者组件没有正确引入 CSS 文件。
✅ 解决办法：
- 检查类名是否拼写正确
- 检查是否导入了对应的
.css文件 - 打开开发者工具查看元素是否有样式加载
2. 为什么有人推荐CSS-in-JS？
因为它解决了传统CSS的一些痛点：
- 避免全局类名冲突
- 更好的组件化
- 支持动态样式
- 更容易复用样式逻辑
3. CSS-in-JS会影响性能吗？
对于大多数中小型项目，性能影响几乎可以忽略不计。只有在非常大型的应用中才需特别优化。
4. 我应该一开始就学CSS-in-JS吗？
如果你是完全的新手，建议先掌握传统CSS，再去尝试CSS-in-JS。
因为CSS-in-JS其实是“CSS + JS + 工具”的组合，理解基础知识后再进阶会更轻松。
学习建议：下一步该学什么？
如果你已经掌握了基础内容，下面是一些扩展方向：
✅ 对于传统CSS：
- 学习 CSS 动画（transition / animation）
- 掌握 Flexbox 和 Grid 布局
- 使用 Sass/SCSS 提升 CSS 编写效率
✅ 对于 CSS-in-JS：
- 学习 styled-components 的高级特性（主题、props传值）
- 学习 Emotion 的
css prop和Global样式 - 熟悉 Tailwind CSS + Headless UI 的组合方案
结语：选择合适的工具，才能事半功倍！
作为一名前端开发者，无论是传统CSS还是CSS-in-JS，都是有效的工具。
- 如果你是新手，建议从传统CSS开始学习
- 如果你在开发组件化项目（如 React/Vue 项目），可以逐步尝试 CSS-in-JS
- 最终目标是根据项目需求和个人习惯，灵活运用不同的方案
希望这篇教程能帮你打下坚实的基础，祝你一路顺利地成为优秀的前端开发者！💡
🔚 如果你喜欢这样的教学风格，欢迎点赞、收藏或分享给正在学习的朋友 🙏
评论 0