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

前端说你再看

2025-06-19 06:18

阅读 3687

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

在网页开发中，CSS（层叠样式表） 是负责页面样式的语言。它告诉我们一个按钮应该是红色还是蓝色、文字应该多大、布局怎么排布等等。

而随着前端技术的发展，我们有了一个新的方式来写样式——CSS-in-JS，顾名思义，就是把样式写在 JavaScript 文件中。

这两种方式各有特点，适用于不同的项目需求和开发风格。本教程将从头开始讲解：

什么是传统 CSS
什么是 CSS-in-JS
它们的区别、优缺点
如何使用它们
哪种更适合你

我们将通过一个简单的实战项目带你一步步了解两者的用法和区别，并解答你作为初学者可能遇到的常见问题。

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

在学习任何编程技术之前，我们都需要准备好开发环境。这里我们以最常见的前端开发工具为例，让你快速上手。

第一步：安装 Node.js 和 npm

Node.js 是运行 JavaScript 的工具，npm 是它的包管理器，我们可以用它安装很多前端库。

操作步骤：

打开浏览器，访问 https://nodejs.org
点击 LTS版本 的下载按钮（推荐新手选择长期支持版）
下载后安装即可

安装完成后，在命令行中输入：

node -v
npm -v

如果显示版本号（比如 v18.17.1），就说明安装成功了！

第二步：创建你的第一个 React 项目

为了更直观地对比 CSS-in-JS 和传统 CSS 的使用，我们使用主流框架 React 来演示。

创建项目：

npx create-react-app css-vs-csj
cd css-vs-csj
npm start

等待几秒后，浏览器会自动打开一个空白页面。

现在我们的开发环境已经准备好了！

核心概念：通俗解释关键术语

CSS动画效果展示-1

传统 CSS 是什么？

传统 CSS 就是我们最熟悉的写样式的方式。我们在 HTML 中通过类名绑定样式，然后在 .css 文件中定义这些类的样式规则。

示例：

HTML 文件：

<!-- App.js -->
<div className="box">这是一个盒子</div>

CSS 文件：

/* App.css */
.box {
  width: 200px;
  height: 100px;
  background-color: lightblue;
  color: black;
}

这样写出来的效果就是一个带有背景色和文字颜色的矩形盒子。

✅优点：

学习成本低
语法简单明了
可维护性好（对于小项目）

❌缺点：

需要手动命名类
容易重复或冲突
大型项目难以维护（尤其是多人协作时）

CSS-in-JS 是什么？

CSS-in-JS 是一种新潮的写法，它不再单独写 .css 文件，而是直接在 JavaScript 中写样式对象。每个组件都拥有自己的样式，互不干扰。

示例：

// App.js
const boxStyle = {
  width: '200px',
  height: '100px',
  backgroundColor: 'lightgreen',
  color: 'white'
};

function App() {
  return <div style={boxStyle}>这是用JS写的盒子</div>;
}

✅优点：

不用管类名命名的问题
组件化的样式结构清晰
更容易实现动态样式（根据状态改变样式）

❌缺点：

初学稍复杂（需要理解对象写法）
性能优化要求更高
对于团队协作来说配置可能比较麻烦

我该如何选择？

场景	推荐使用
初学入门，小型项目	✅ 传统 CSS
使用 React/Vue 等现代框架	✅ CSS-in-JS 或模块化 CSS
团队协作/大型项目	✅ CSS-in-JS（如styled-components）

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

我们将做一个“主题切换”功能的小项目，展示两种方法分别如何实现。

功能说明：

点击按钮可以切换深色和浅色模式。

一、使用传统 CSS 实现

1. 在 `App.js` 添加结构

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

function App() {
  return (
    <div className="container light">
      <h1>欢迎来到我的网站</h1>
      <button>切换主题</button>
    </div>
  );
}

export default App;

2. 修改 `App.css` 内容

.container {
  padding: 20px;
  transition: background-color 0.3s, color 0.3s;
}

.light {
  background-color: white;
  color: black;
}

.dark {
  background-color: #333;
  color: white;
}

此时页面是白色背景的。下一步我们要给按钮加上交互。

3. 给按钮添加切换逻辑

修改 App.js：

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

function App() {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };

  return (
    <div className={`container ${theme}`}>
      <h1>欢迎来到我的网站</h1>
      <button onClick={toggleTheme}>切换主题</button>
    </div>
  );
}

export default App;

刷新页面就可以看到切换效果啦！

二、使用 CSS-in-JS 实现（以内联样式为例）

我们将同样的功能用内联样式的方法重写一遍。

修改 `App.js`

import { useState } from 'react';

function App() {
  const [theme, setTheme] = useState('light');

  const styles = {
    light: {
      backgroundColor: 'white',
      color: 'black',
      padding: '20px',
      transition: 'background-color 0.3s, color 0.3s'
    },
    dark: {
      backgroundColor: '#333',
      color: 'white',
      padding: '20px',
      transition: 'background-color 0.3s, color 0.3s'
    }
  };


![前端性能优化图表-2](https://code-guide.oss.shanghai.autogptai.club/common/file/download?name=date2025061906/fc3771a7-e403-4e9d-9648-d4c70dbdda48.jpg)


  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };

  return (
    <div style={styles[theme]}>
      <h1>欢迎来到我的网站</h1>
      <button onClick={toggleTheme}>切换主题</button>
    </div>
  );
}

export default App;

删除或者注释掉原来的 App.css 文件引用，因为我们这次完全用 JS 控制样式。

此时也能正常切换主题！

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

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

📝 可能原因与解决办法：

类名拼写错误（注意大小写）
忘记导入 CSS 文件（检查 import 语句）
同一个元素被多个样式覆盖了（优先级问题）

✅ 解决建议：打开浏览器开发者工具，查看元素应用了哪些样式，定位出错点。

❓ Q2：CSS-in-JS 要不要写分号？

📝 在传统的 CSS 中我们习惯加分号，但在 JS 对象中不需要。

例如：

const style = {
  color: 'red',   // 正确 ✅
  fontSize: '20px' // 正确 ✅，没有分号也没关系
};

❓ Q3：什么时候应该使用 CSS-in-JS？

📝 如果你在写 React 或 Vue 这样的现代组件化项目，且想要：

更好的组件封装
动态样式变化（基于状态）
提高可维护性

那你就可以考虑使用 CSS-in-JS。

❓ Q4：CSS-in-JS 有专门的库吗？

当然！有一些流行的库可以帮助你更好地组织代码，比如：

styled-components（React 专用）
emotion
goober

不过本文主要介绍的是基础用法，后面你可以再学习这些高级库。

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

恭喜你完成了这篇教程的学习！以下是建议你接下来继续深入的方向：

📚 学习路径建议：

掌握传统 CSS 的进阶技巧
- 盒模型
- Flex 布局
- Grid 布局
- 响应式设计（Media Query）
学习 CSS 模块化（CSS Modules）
- 结合 React 使用模块化 CSS
- 避免类名冲突的好方法
探索 CSS-in-JS 库
- 学习 styled-components 或 emotion
- 理解其带来的组件化优势
动手做更多实战项目
- 表单验证界面
- 卡片组件库
- 个人简历页面等
结合构建工具
- 理解 Webpack / Vite 是如何处理样式的
- 自定义打包流程

结尾总结：CSS 和 CSS-in-JS 是互补而非对立

在前端开发中，没有绝对的好坏，只有合适与不合适。

✅ 传统 CSS 适合初学者和中小型项目
✅ CSS-in-JS 更适合组件化开发和大型项目
⚠️ 两者不是非此即彼的关系，很多时候我们会混合使用

希望你能通过这篇文章迈出理解“现代样式解决方案”的第一步。

如果你觉得这篇文章对你有帮助，请点赞并收藏，后续我会带来更多精彩内容！

✅ 练习作业（选做）
尝试在上面的项目中为“按钮”也加上样式切换，让它在不同主题下有不同的背景色。可以用两种方式各实现一次。

如果你完成了，请在评论区晒出你的代码吧 😄

文末提示：前端之路漫长但有趣，祝你早日成为优秀的开发者！

标签:书籍后端React求职

最热最新

暂无评论

为你推荐

暂无相关推荐

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

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

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

第一步：安装 Node.js 和 npm

操作步骤：

第二步：创建你的第一个 React 项目

创建项目：

核心概念：通俗解释关键术语

传统 CSS 是什么？

示例：

CSS-in-JS 是什么？

示例：

我该如何选择？

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

功能说明：

一、使用传统 CSS 实现

1. 在 `App.js` 添加结构

2. 修改 `App.css` 内容

3. 给按钮添加切换逻辑

二、使用 CSS-in-JS 实现（以内联样式为例）

修改 `App.js`

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

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

❓ Q2：CSS-in-JS 要不要写分号？

❓ Q3：什么时候应该使用 CSS-in-JS？

❓ Q4：CSS-in-JS 有专门的库吗？

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

📚 学习路径建议：

结尾总结：CSS 和 CSS-in-JS 是互补而非对立

评论 0

为你推荐

精选内容

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

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

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

第一步：安装 Node.js 和 npm

操作步骤：

第二步：创建你的第一个 React 项目

创建项目：

核心概念：通俗解释关键术语

传统 CSS 是什么？

示例：

CSS-in-JS 是什么？

示例：

我该如何选择？

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

功能说明：

一、使用传统 CSS 实现

1. 在 App.js 添加结构

2. 修改 App.css 内容

3. 给按钮添加切换逻辑

二、使用 CSS-in-JS 实现（以内联样式为例）

修改 App.js

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

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

❓ Q2：CSS-in-JS 要不要写分号？

❓ Q3：什么时候应该使用 CSS-in-JS？

❓ Q4：CSS-in-JS 有专门的库吗？

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

📚 学习路径建议：

结尾总结：CSS 和 CSS-in-JS 是互补而非对立

评论 0

为你推荐

精选内容

1. 在 `App.js` 添加结构

2. 修改 `App.css` 内容

修改 `App.js`