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

分支开太多了

2025-06-26 08:34

阅读 289

开篇：什么是CSS和CSS-in-JS？

在我们开始写网页之前，我们需要先了解一个基本的概念：样式。
想象一下你要装修房子，颜色、墙面、灯光都是风格的一部分。而在网页中，CSS（层叠样式表）就是为网页元素“装饰”用的语言。

那传统的CSS是怎么工作的呢？你可以把它想成一个单独的衣柜，里面装着你所有衣服的颜色和搭配规则。而你的HTML页面（结构）就像一个人穿衣服，直接去衣柜里找风格来装饰自己。

但随着技术的发展，一种新的做法出现了 —— CSS-in-JS（把样式写在JS里）。它更像是“随身自带穿搭师”，每个组件自己决定怎么打扮自己，不需要再去查外部文件。

本教程将带你从零基础理解这两种方式的区别，并手把手教你用其中一种写一个小项目。

环境准备：搭好开发环境

为了让你能动手实践两种方法，你需要准备好基本的前端开发环境。

安装 VS Code（编辑器）

访问 https://code.visualstudio.com/
下载并安装适合你电脑系统的版本
打开软件后可看到代码编辑界面

安装 Node.js（运行 JavaScript 的环境）

前往 https://nodejs.org/
下载长期支持版（LTS）
安装完成后，在命令行输入 node -v 和 npm -v，如果看到版本号，就说明安装成功！

创建 React 项目（我们将使用它演示 CSS-in-JS）

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

你现在有一个运行中的React应用了，打开浏览器访问 http://localhost:3000 就能看到默认欢迎页面。

核心概念：传统CSS和CSS-in-JS的区别

我们来用生活例子理解这两个概念：

🌟 传统CSS：统一管理样式的“公共衣柜”

特点：

每个HTML标签引用类名（class）
所有样式都放在 .css 文件中
结构分离，容易多人协作
可能出现类名冲突

示例代码：

创建一个名为 styles.css 的文件：

/* styles.css */
.box {
  background-color: lightblue;
  padding: 20px;
  border-radius: 8px;
}

在 index.html 引入这个CSS文件：

<link rel="stylesheet" href="styles.css">

使用这个样式：

<div class="box">这是一个蓝框</div>

💡 CSS-in-JS：给每个组件自定义穿衣风格

这种方法是让组件自带自己的样式，不需要引用一个全局的CSS文件。常见的库有 styled-components、emotion。

特点：

每个组件都有自己的样式逻辑
更好的模块化与封装
避免命名冲突
初期学习成本稍高

示例代码（使用 styled-components）：

安装库：

npm install styled-components

在组件中定义样式：

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

const Box = styled.div`
  background-color: lightgreen;
  padding: 20px;
  border-radius: 8px;
`;

function App() {
  return (
    <Box>这是一个绿框</Box>
  );
}

export default App;

是不是很像写JavaScript对象，只不过用了反引号 ` 包裹CSS代码？

实战项目：做一个“按钮风格切换器”

前端性能优化图表-1

实战项目：做一个“按钮风格切换器”

我们现在来做个小项目——通过点击按钮来切换两个不同样式的按钮。

我们分别用两种方式实现一遍，让你对比感受差别。

💻 方法一：使用传统CSS

步骤1：创建 `App.css` 文件

.default-btn {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  margin: 10px;
}

.alternate-btn {
  background-color: #f44336;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  margin: 10px;
}

步骤2：修改 `App.js`

import './App.css';
import { useState } from 'react';

function App() {
  const [isAlternate, setIsAlternate] = useState(false);

  return (
    <div>
      <button 
        className={isAlternate ? "alternate-btn" : "default-btn"}
        onClick={() => setIsAlternate(!isAlternate)}
      >
        点击换色
      </button>
    </div>
  );
}

export default App;

现在你的按钮应该可以从绿色变成红色啦！✅

🧠 方法二：使用 styled-components（CSS-in-JS）

步骤1：安装依赖（之前安装过可以跳过）

npm install styled-components

步骤2：修改 `App.js`

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

// 定义两种样式的按钮
const DefaultButton = styled.button`
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  margin: 10px;
`;

const AlternateButton = styled.button`
  background-color: #f44336;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  margin: 10px;
`;

function App() {
  const [isAlternate, setIsAlternate] = useState(false);

  return (
    <div>
      {isAlternate ? (
        <AlternateButton onClick={() => setIsAlternate(false)}>
          点击恢复原色
        </AlternateButton>
      ) : (
        <DefaultButton onClick={() => setIsAlternate(true)}>
          点击换色
        </DefaultButton>
      )}
    </div>
  );
}

export default App;

看起来是不是更直观地看到哪个按钮是什么样式？😎

新手常见问题解答

Q1：我应该怎么选哪种方式？

A：如果你刚入门，建议从传统CSS开始，因为更容易上手；等你熟悉React之后，再尝试CSS-in-JS会更舒服。

Q2：CSS-in-JS 是不是必须配合 React？

A：大部分情况下，CSS-in-JS 是配合React使用的，但其实也可以用于Vue或其它框架。

Q3：传统CSS会不会被淘汰？

A：不会。很多老项目还在用传统CSS，而且也不断在进化（比如使用 PostCSS、Tailwind CSS 等工具），依然非常实用。

Q4：为什么有时候样式没生效？

A：检查以下几点：

是否写错类名？
是否忘记引入CSS文件？
是否样式被覆盖（优先级问题）？
是否拼写错误？

Q5：如何调试CSS样式？

A：打开浏览器开发者工具（按 F12 或右键网页 → “检查”），查看对应元素的 computed style 和 applied classes。

学习建议：下一步该怎么学？

恭喜你走完了这一段旅程！以下是几个建议供你继续成长：

✅ 初学者路线图：

学会基础 HTML/CSS/JS
掌握响应式设计基础（如媒体查询）
学习使用构建工具（Webpack/Vite）
探索 CSS 动画和过渡效果
进阶到 CSS Modules 或 Tailwind CSS
接触 CSS-in-JS 并熟练掌握其中一个库（如 styled-components）

📚 推荐学习资源：

免费：
- MDN Web Docs
- W3Schools
付费：
- Frontend Masters
- Udemy - Modern React with Redux （含 styled-components 讲解）

总结

这篇文章为你梳理了两种主流样式方案的区别和使用方法：

对比项	传统CSS	CSS-in-JS
上手难度	✅ 简单	⛔ 稍微复杂
模块化	❌ 全局作用域易冲突	✅ 每个组件独立样式
调试	✅ 浏览器审查方便	⛔ 需要一定习惯
维护性	✅ 适合大团队	✅ 极简维护体验

作为初学者，从传统CSS入手更容易起步，之后再根据需求选择是否转向CSS-in-JS，是一个稳妥的学习路径。最重要的是多动手写代码，才能真正掌握这些知识！

希望这篇教程对你有帮助！如果你觉得内容有用，欢迎分享给其他正在学习的同学 🎉

标签:爬虫ReactJava资源

最热最新

暂无评论

为你推荐

暂无相关推荐

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

开篇：什么是CSS和CSS-in-JS？

环境准备：搭好开发环境

安装 VS Code（编辑器）

安装 Node.js（运行 JavaScript 的环境）

创建 React 项目（我们将使用它演示 CSS-in-JS）

核心概念：传统CSS和CSS-in-JS的区别

🌟 传统CSS：统一管理样式的“公共衣柜”

特点：

示例代码：

💡 CSS-in-JS：给每个组件自定义穿衣风格

特点：

示例代码（使用 styled-components）：

实战项目：做一个“按钮风格切换器”

💻 方法一：使用传统CSS

步骤1：创建 `App.css` 文件

步骤2：修改 `App.js`

🧠 方法二：使用 styled-components（CSS-in-JS）

步骤1：安装依赖（之前安装过可以跳过）

步骤2：修改 `App.js`

新手常见问题解答

学习建议：下一步该怎么学？

✅ 初学者路线图：

📚 推荐学习资源：

总结

评论 0

为你推荐

精选内容

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

开篇：什么是CSS和CSS-in-JS？

环境准备：搭好开发环境

安装 VS Code（编辑器）

安装 Node.js（运行 JavaScript 的环境）

创建 React 项目（我们将使用它演示 CSS-in-JS）

核心概念：传统CSS和CSS-in-JS的区别

🌟 传统CSS：统一管理样式的“公共衣柜”

特点：

示例代码：

💡 CSS-in-JS：给每个组件自定义穿衣风格

特点：

示例代码（使用 styled-components）：

实战项目：做一个“按钮风格切换器”

💻 方法一：使用传统CSS

步骤1：创建 App.css 文件

步骤2：修改 App.js

🧠 方法二：使用 styled-components（CSS-in-JS）

步骤1：安装依赖（之前安装过可以跳过）

步骤2：修改 App.js

新手常见问题解答

学习建议：下一步该怎么学？

✅ 初学者路线图：

📚 推荐学习资源：

总结

评论 0

为你推荐

相关推荐

精选内容

步骤1：创建 `App.css` 文件

步骤2：修改 `App.js`

步骤2：修改 `App.js`