CSS-in-JS vs 传统CSS：现代样式方案选择指南

开篇：简单介绍这个技术是什么，用来做什么

在前端开发中，我们经常需要控制网页的外观和布局。传统的做法是使用CSS（层叠样式表），这是一种专门用于描述网页元素如何显示的语言。而随着React等现代前端框架的流行，出现了一种新的方式来管理样式，叫做CSS-in-JS。

顾名思义，CSS-in-JS 就是在 JavaScript 中写样式，而不是单独写一个 .css 文件。这种方式可以让我们更灵活地动态控制样式，并且将样式和组件逻辑紧密结合在一起。

那么问题来了：我应该学习传统的CSS还是CSS-in-JS？它们各自的优缺点是什么？哪一种更适合我现在使用的框架或项目？

本篇文章就是为完全零基础的新手准备的指南，帮助你清晰理解这两者之间的差异，并根据自己的需求选择适合的方式。

---

环境准备：详细的开发环境搭建步骤

在正式开始之前，我们需要先准备好开发环境。这里我们以React项目为例，因为它是最常与CSS-in-JS结合使用的框架之一。

步骤1：安装Node.js和npm

CSS-in-JS通常依赖于Node.js环境运行，所以我们第一步要安装它。

• 访问 https://nodejs.org/

• 下载并安装 LTS 版本

• 安装完成后，在终端输入以下命令验证是否安装成功：

  node -v
  npm -v
  

如果看到类似 v16.x.x 和 8.x.x 的版本号，说明安装成功。

步骤2：创建React项目

我们使用Facebook官方提供的脚手架工具 create-react-app 来快速搭建一个React项目：

npx create-react-app my-styling-project
cd my-styling-project
npm start

执行完上述命令后，项目会自动打开在浏览器中，页面上显示欢迎信息就表示项目创建成功。

现在我们的项目结构如下：

my-styling-project/
├── public/
├── src/
│   ├── App.js
│   └── index.js
├── package.json
└── ...

接下来我们就可以在 src/App.js 中编写我们的样式代码了！

---

核心概念：用通俗的语言解释关键概念

在真正动手写代码之前，我们要了解几个重要的核心概念。

1. 什么是传统CSS？

CSS 是一种样式语言，用来告诉浏览器某个网页元素应该长什么样。比如字体颜色、背景色、边框等等。

我们在HTML文件中通过 <link> 引入外部CSS文件，或者在 <style> 标签中直接写CSS代码。

例如：

<style>
  h1 {
    color: red;
  }
</style>

<h1>这是红色标题</h1>

在React项目中，我们通常会将样式写在 .css 文件中，并通过 import 导入组件中。

例如：

// App.css
.title {
  color: blue;
}

// App.js
import './App.css';

function App() {
  return <h1 className="title">这是一个蓝色标题</h1>;
}

这种方式简单直观，但也有其局限性，比如全局污染、难以复用等问题。

2. 什么是CSS-in-JS？

CSS-in-JS 允许我们把样式直接写在 JavaScript 文件中。也就是说，我们可以像写变量一样写CSS，然后在组件中使用它。

这样做的好处包括：

• 每个组件有自己独立的样式，不会互相干扰
• 可以使用 JavaScript 的特性（如条件判断、函数等）生成动态样式
• 更容易进行主题定制或样式复用

常见的 CSS-in-JS 库有：

• styled-components
• emotion
• glamorous

下面我们以 styled-components 为例来展示它的用法。

安装styled-components

npm install styled-components

使用示例

// App.js
import styled from 'styled-components';

// 创建一个带样式的h1组件
const Title = styled.h1`
  color: green;
  font-size: 24px;
`;

function App() {
  return <Title>这是绿色标题</Title>;
}

在这里，我们没有引入任何 .css 文件，而是直接在JS中写了样式。

3. 对比总结

特点	传统CSS	CSS-in-JS
样式定义位置	外部.css文件	内联JavaScript中
是否支持动态样式	✘	✔
是否易受其他样式影响	✔（全局污染）	✘（局部作用域）
是否易于维护	简单项目易维护	复杂项目更易组织
是否支持主题	✘	✔（通过上下文实现）

---

实战项目：跟着教程一步步完成一个简单项目

为了更好地理解传统CSS和CSS-in-JS的区别，我们将分别用两种方式实现一个“按钮点击计数器”的小功能。

功能说明：

• 页面上有两个按钮：加1 和 减1
• 显示当前数值
• 按钮要有基本的样式（背景色、边距、悬停效果等）

---

方式一：使用传统CSS实现

第一步：创建Button.css文件

在 src/Button.css 中写入以下内容：

.button-style {
  padding: 10px 20px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin: 5px;
}

.button-style:hover {
  background-color: #0056b3;
}

第二步：在App.js中使用它

修改 src/App.js 如下：

import React, { useState } from 'react';
import './Button.css';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>当前数值：{count}</h1>
      <button className="button-style" onClick={() => setCount(count + 1)}>加1</button>
      <button className="button-style" onClick={() => setCount(count - 1)}>减1</button>
    </div>
  );
}

export default App;

运行结果：你会看到两个漂亮的按钮和中间显示数字的区域。

优点：样式统一，结构清晰，适合入门级练习。

---

方式二：使用CSS-in-JS实现（styled-components）

第一步：安装styled-components（前面已安装过可跳过）

npm install styled-components

第二步：在App.js中直接定义样式

修改 src/App.js：

import React, { useState } from 'react';
import styled from 'styled-components';

// 定义一个带样式的按钮组件
const StyledButton = styled.button`
  padding: 10px 20px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin: 5px;

  &:hover {
    background-color: #218838;
  }
`;

function App() {
  const [count, setCount] = useState(0);

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>当前数值：{count}</h1>
      <StyledButton onClick={() => setCount(count + 1)}>加1</StyledButton>
      <StyledButton onClick={() => setCount(count - 1)}>减1</StyledButton>
    </div>
  );
}

export default App;

运行结果：同样实现了带样式的按钮和计数器。

优点：样式直接嵌入组件，无需引用额外CSS文件；更灵活支持主题、状态变化等高级功能。

---

常见问题：新手容易遇到的问题和解决方案

下面是一些初学者常常遇到的问题，以及对应的解决方法。

Q1：为什么用了传统CSS但样式没生效？

可能原因：

• 类名拼写错误
• 样式被其他CSS覆盖（全局污染）
• 没有正确导入CSS文件到组件中

解决方法：

• 检查类名是否一致（区分大小写）
• 在浏览器开发者工具（F12）中查看元素是否有应用对应样式
• 给样式加上 !important 临时测试（不推荐长期使用）

Q2：CSS-in-JS真的比传统CSS更好吗？

答：不是绝对的。每种方式都有适用场景：

• 如果你在做一个小型项目或静态页面，使用传统CSS更简单。
• 如果你用的是React或其他现代框架，CSS-in-JS能提供更好的封装性和可维护性。

关键是根据你的项目类型和技术栈来选择合适的方式。

Q3：CSS-in-JS会不会让JS文件变得很臃肿？

答：如果你只是写几个简单的样式，其实不会太明显。但如果样式非常复杂，建议：

• 将样式组件拆分成单独的文件
• 使用模块化组织代码
• 保持样式组件简洁明了

Q4：CSS-in-JS性能好吗？

答：大多数情况下性能差异可以忽略不计。虽然CSS-in-JS会在运行时动态插入样式，但现代库都做了很好的优化，对用户几乎无感知影响。

---

学习建议：下一步的学习路径建议

恭喜你已经完成了第一课！你现在知道：

• CSS的基本用途
• CSS-in-JS 的优势及应用场景
• 如何用两种方式实现相同功能
• 遇到常见问题该怎么排查

接下来你可以沿着以下方向继续深入学习：

初级进阶建议：

1. 学习更多CSS基础知识（如Flex布局、Grid布局、响应式设计）
2. 尝试给你的项目添加响应式设计
3. 探索更多的CSS-in-JS库，比如emotion和stitches
4. 研究主题系统（theme）和样式共享

推荐学习资源：

• MDN Web Docs：https://developer.mozilla.org/zh-CN/docs/Web/CSS
• styled-components官方文档：https://styled-components.com/
• React官方文档：https://reactjs.org/
• B站/YouTube上的CSS实战教学视频（搜索关键词“CSS入门+项目”）

---

结语

无论你是想成为一个专业的Web开发者，还是仅仅出于兴趣想了解更多前端知识，掌握CSS及其现代替代方案CSS-in-JS都是非常有用的技能。希望这篇教程能成为你学习之路的一盏灯塔，助你少走弯路，快乐coding！

记住一句话：“最好的框架是你能驾驭的那个。”不要急于决定哪种方式更好，多尝试、多比较，自然能找到最适合自己的那条路。

祝你学习愉快！🎉