《CSS-in-JS vs 传统CSS：现代样式方案选择指南》
开篇：什么是CSS和CSS-in-JS？
你有没有想过，为什么网页看起来五彩斑斓、有层次感？那是因为有了**样式表（CSS）**的帮助。CSS 是 Cascading Style Sheets 的缩写，中文叫“层叠样式表”。它负责控制网页的外观——比如颜色、字体、布局等。
但随着前端技术的发展，出现了一种新的方式来处理样式，叫做 CSS-in-JS。顾名思义，就是把 CSS 样式写在 JavaScript 文件中，而不是单独写在一个 .css 文件里。
这听起来可能有点奇怪，为什么要这样做呢？我们将在下文中详细对比两种方法的优缺点，并带你一步步尝试它们的实际应用。
环境准备：搭建开发环境
在开始之前，我们需要一个简单的项目结构来测试这两种方式。如果你还不熟悉这些内容，不要担心，跟着做就可以了！
步骤1：安装 Node.js 和 npm
前往官网 https://nodejs.org/ 下载并安装 Node.js（推荐 LTS 版本），安装完成后，在命令行输入以下命令验证是否成功：
node -v
npm -v
如果能看到版本号输出，说明安装成功！
步骤2：创建你的第一个 React 项目（使用 Vite）
Vite 是一个现代、快速的前端构建工具。我们将使用它来创建项目。
在终端运行以下命令：
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev
打开浏览器访问 http://localhost:5173，你应该能看到 React 的欢迎页面。
现在我们的开发环境就准备好了！接下来我们将分别学习传统的 CSS 方法和 CSS-in-JS 方法。
核心概念：传统CSS和CSS-in-JS有什么区别？
下面用最通俗的语言解释这两个术语的核心思想。
1. 传统 CSS 是什么？
传统 CSS 就是我们在 HTML 页面中引入 .css 文件的方式。例如：
- 创建一个名为
style.css的文件。 - 在 HTML 中通过
<link>引入这个 CSS 文件。 - 在 CSS 文件中编写样式规则。
这种方式历史悠久，稳定，适合大多数网站。
示例：
/* style.css */
.title {
color: red;
font-size: 24px;
}
<!-- index.html -->
<h1 class="title">Hello, CSS</h1>
<link rel="stylesheet" href="style.css">
2. CSS-in-JS 又是什么？
CSS-in-JS 把 CSS 写进 JavaScript 文件中，也就是说，你在写 JS 的时候同时也在写样式，不用再单独维护 .css 文件。
常见的 CSS-in-JS 库有：
- styled-components（React 生态中最流行的）
- emotion
- JSS
- aphrodite 等
示例：使用 styled-components
首先安装库：
npm install styled-components
然后在组件中这样使用：
// App.jsx
import styled from 'styled-components';
const Title = styled.h1`
color: blue;
font-size: 24px;
`;
function App() {
return <Title>Hello, Styled Components</Title>;
}
export default App;
实战项目：对比两种方式实现同一个按钮组件
我们来做一个小项目，看看两种方式如何分别实现一个带样式的按钮。
任务目标：
实现两个按钮，分别为“登录”和“注册”，风格统一，悬停时背景变深。
方式一：传统 CSS
第一步：创建 button.css 文件
.button-style {
padding: 10px 20px;
border: none;
color: white;
background-color: #007bff;
cursor: pointer;
margin: 5px;
}
.button-style:hover {
background-color: #0056b3;
}
第二步：在组件中引用 CSS 类
// ButtonTraditional.jsx
import './button.css';
function ButtonTraditional() {
return (
<>
<button className="button-style">登录</button>
<button className="button-style">注册</button>
</>
);
}
export default ButtonTraditional;
方式二：CSS-in-JS（使用 styled-components）
第一步：安装依赖（如尚未安装）
npm install styled-components
第二步：编写按钮组件
// ButtonStyled.jsx
import styled from 'styled-components';
const StyledButton = styled.button`
padding: 10px 20px;
border: none;
color: white;
background-color: #28a745;
cursor: pointer;
margin: 5px;
&:hover {
background-color: #218838;
}
`;
function ButtonStyled() {
return (
<>
<StyledButton>登录</StyledButton>
<StyledButton>注册</StyledButton>
</>
);
}
export default ButtonStyled;
你可以将这两个组件导入到主入口 App.jsx 中，对比显示效果。
常见问题解答（FAQ）
下面是初学者最容易遇到的问题及解决方案。
Q1：传统CSS会覆盖另一个组件的样式吗？
答：有可能。这是传统 CSS 的一个问题，称为样式污染。如果多个组件都用了 .btn 类名，修改其中一个可能影响另一个。
解决方案：
- 使用更具体的类名（如
login-btn） - 使用 CSS Modules 或 CSS-in-JS（自动作用域隔离）
Q2：CSS-in-JS 不是违背了“分离关注点”的原则吗？
答：这个问题很经典！
确实有人认为样式和逻辑应该分开。但在实际开发中，特别是在组件化架构（如 React）中，样式和组件本身关系非常紧密。让样式和组件放在一起可以提高可维护性。
这也是为什么很多团队愿意使用 CSS-in-JS。
Q3：CSS-in-JS 性能好吗？
答：一般情况下性能差不多，现代 CSS-in-JS 已经优化得很好。对于大型项目，要注意避免不必要的重复渲染。可以通过 memoization（记忆化）等方式优化。
Q4：我该选哪种方式？
答：取决于你的项目需求和个人喜好。
| 项目需求 | 推荐方案 |
|---|---|
| 简单静态页面 | 传统 CSS |
| 组件化开发 | CSS-in-JS |
| 多人协作项目 | CSS-in-JS（减少冲突） |
| 需要兼容老旧浏览器 | 传统 CSS |
学习建议：下一步学什么？
学完今天的内容后，你可以继续深入以下几个方向：
✅ 深入学习方向推荐：
传统 CSS 进阶
- 学习 Flex 布局、Grid 布局
- 掌握响应式设计原理（media queries）
- 学习 CSS 动画（transition & animation）
CSS-in-JS 深入理解
- 尝试 emotion、styled-components 的高级功能（如主题支持）
- 学习 CSS Modules（也是一种模块化 CSS 方法）
- 探索 Tailwind CSS（一种 utility-first 的 CSS 框架）
现代前端工程实践
- 掌握 SCSS / LESS 等 CSS 预处理器
- 学习 PostCSS 和其插件系统
- 理解构建工具（Webpack / Vite）是如何处理样式的
结语
这篇文章从零基础出发，介绍了传统 CSS 和 CSS-in-JS 的核心概念、环境搭建、实战演示以及常见问题解答。希望你能对两者有一个清晰的认识，并根据自己的需求选择合适的方式来管理项目的样式。
CSS 虽然只是前端的一部分，但掌握得好，能让你的项目看起来更专业、维护起来更轻松。加油！
评论 0