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

Bean没注入

2025-06-28 19:00

阅读 283

开篇：什么是样式方案？为什么它如此重要？

当你在网页上看到一段优美的布局、色彩鲜艳的按钮，或动画流畅的交互效果时，你很可能已经接触到了样式（Styling）。样式决定了网页“看起来”的样子，是前端开发中最基础也最关键的部分之一。

在网页开发中，我们有两种主要的样式管理方式：

传统CSS：这是最经典的写法，用.css文件来定义页面元素的样式。
CSS-in-JS：这是一种较新的写法，直接在JavaScript代码中编写样式，并由库来自动注入到页面中。

它们各有利弊，适用于不同的项目需求。如果你是初学者，可能会疑惑到底该学哪个更好、怎么选。本教程将带你一步步了解这两种方法的核心概念，并通过一个简单的项目来让你亲身体验两者的差异。

无论你是刚入门的新手，还是想转行做前端开发，这篇教程都会为你打下坚实的基础，帮助你做出适合自己的技术选择。

环境准备：搭建你的第一个练习环境

在开始写样式之前，我们要先搭好开发环境。为了简单易懂，我们会使用最基础的HTML + JavaScript结构来进行学习。

步骤一：创建项目目录结构

打开电脑上的任意编辑器（比如 VSCode），新建一个文件夹，命名为 styling-tutorial，然后在里面创建以下文件：

/styling-tutorial
│
├── index.html
├── styles.css
└── app.js

步骤二：初始化HTML文件内容

打开 index.html 文件，输入以下代码：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>CSS-in-JS vs 传统CSS</title>
  <!-- 引入传统CSS -->
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>欢迎来到样式世界</h1>
  <button id="myButton">点击我试试</button>

  <!-- 引入JS脚本 -->
  <script src="app.js"></script>
</body>
</html>

这部分代码非常基础，我们只是定义了一个标题和一个按钮。接下来我们将在这两个文件 styles.css 和 app.js 中分别实现传统CSS和CSS-in-JS样式的例子。

步骤三：打开本地服务器运行项目

为了让我们的项目可以运行起来（特别是在使用动态脚本时），我们需要一个本地服务器。你可以使用任何你喜欢的方式启动服务器，例如：

使用VSCode安装 Live Server 插件：

安装 Live Server
在 index.html 文件中右键 → Open with Live Server

你也可以使用命令行工具：

npx serve

如果你还没有安装 serve 工具，可以用以下命令安装：

npm install -g serve

现在，你的项目已经运行起来了！

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

让我们先理解一下这两个方案的基本工作原理，再对比它们的特点。

✅ 传统CSS：分离式样式设计

传统的做法是把样式写在一个 .css 文件中，然后通过 <link> 标签引入 HTML 中。

示例：给按钮加上蓝色背景

在 styles.css 中写入：

#myButton {
  background-color: #007BFF;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

刷新页面，你会发现按钮变成了蓝色👇

![按钮截图]

这就是传统的做法：样式和HTML结构是分开的，好处是清晰、规范，适合团队协作。

优点总结：

结构清晰，便于维护
浏览器兼容性好
学习曲线低

缺点：

需要手动管理文件路径
不够灵活（比如不能在JavaScript里动态修改样式）

⚡ CSS-in-JS：样式内嵌在组件逻辑中

CSS-in-JS 是一种现代的写法，允许我们在 JavaScript 中直接编写样式对象，并通过某些库（如 styled-components, emotion, 或自定义方案）把这些样式注入到 DOM 元素中。

示例：给按钮添加蓝色背景（通过CSS-in-JS）

我们不使用 styles.css，而是改用 app.js 来动态控制样式。

在 app.js 中写入如下代码：

// 获取按钮元素
const button = document.getElementById('myButton');

// 创建一个style对象
const btnStyle = {
  backgroundColor: '#28a745', // 绿色
  color: 'white',
  padding: '10px 20px',
  border: 'none',
  cursor: 'pointer'
};

// 把样式赋值给按钮的style属性
Object.assign(button.style, btnStyle);

刷新页面，按钮变成绿色啦！✅

这段代码的关键是：我们没有用 .css 文件，而是在 JavaScript 中直接设置了样式。

💡 举个小栗子对比

特性	传统CSS	CSS-in-JS
文件类型	.css	.js
操作方式	手动编写 + 外部引用	JavaScript 动态生成样式
是否支持变量	否	支持（可在JS中定义）
动态主题切换	困难	容易
调试体验	基于浏览器开发者工具	可结合React调试工具

实战项目：打造一个可切换主题的按钮组件

接下来我们来做个小项目 —— 一个可以切换“深色”和“浅色”主题的按钮组件。

我们将用两种方式实现：一种用传统CSS，另一种用CSS-in-JS。

📌 项目目标

页面上有两个按钮：“亮色模式”和“深色模式”
点击不同按钮可以切换页面的背景色和文字颜色
用两种方式实现：传统CSS版和CSS-in-JS版

方式一：使用传统CSS实现（推荐新手优先掌握）

第一步：在 `index.html` 添加两个按钮

<!-- 增加两个切换主题的按钮 -->
<button onclick="switchTheme('light')">亮色模式</button>
<button onclick="switchTheme('dark')">深色模式</button>

第二步：修改 `styles.css` 文件

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

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

第三步：在 `app.js` 编写切换函数

function switchTheme(mode) {
  document.body.className = mode; // 设置body的class为 light 或 dark
}

刷新页面，点击两个按钮，你会看到页面主题切换了！🎉

💡 这种写法虽然看起来简单，但它是很多企业级项目的标准做法，稳定性强。

方式二：使用CSS-in-JS实现

这次我们不再使用 styles.css 文件，而是直接在 JS 中动态设置样式。

修改 `index.html`：

删除之前的 <link> 标签：

<!-- 删除这行 -->
<link rel="stylesheet" href="styles.css">

修改 `app.js` 内容如下：

// 定义两种样式对象
const themes = {
  light: {
    backgroundColor: 'white',
    color: 'black'
  },
  dark: {
    backgroundColor: '#333',
    color: 'white'
  }
};

// 切换主题的函数
function switchTheme(mode) {
  const style = themes[mode];
  Object.assign(document.body.style, style);
}

同样地，点击按钮也能切换主题。🎉

这个版本更轻量，适合快速原型或者小型项目。

新手常见问题解答（FAQ）

以下是初学者常问的一些问题，帮助你更快掌握这两种方案的使用技巧。

❓1. 为什么有时候我的样式不起作用？

✅ 可能原因：

CSS 文件路径错误（未正确加载）
类名拼写错误（如 class 和 className 不匹配）
层叠顺序问题（多个样式冲突）

🔧 解决方法：

使用浏览器开发者工具查看元素是否应用了样式
检查 <link> 标签路径是否正确
尝试使用 !important（仅限紧急情况）

❓2. CSS-in-JS需要额外安装哪些库吗？

✅ 答案：

如果你使用的是 React，可以安装 styled-components 或 emotion
如果你不使用框架，可以手动操作 DOM 的 style 属性，就像前面的例子一样

❓3. 我应该什么时候用传统CSS？什么时候用CSS-in-JS？

✅ 推荐规则：

使用场景	推荐方案
学习基础HTML/CSS	传统CSS
企业级大型项目	传统CSS + BEM 命名规范
快速原型开发	CSS-in-JS
动态切换主题或依赖状态变化	CSS-in-JS
与React/Vue等框架配合	CSS-in-JS（配合styled-components）

❓4. 如何调试CSS-in-JS写的样式？

✅ 方法：

打开浏览器开发者工具，查看DOM节点的 style 属性
使用 console.log() 输出你定义的样式对象
确保你的样式对象字段名是驼峰式，如 backgroundColor，而不是 background-color

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

恭喜你完成了这个入门级别的实战项目！接下来你可以沿着以下几个方向继续深入学习：

📘 推荐学习路径

掌握传统CSS的基础
- 盒模型（Box Model）
- Flexbox & Grid 布局
- 响应式设计（Media Queries）
- CSS预处理器如 Sass
进阶CSS-in-JS技术
- 学习流行的CSS-in-JS库：
  - styled-components
  - emotion
- 掌握如何在React中使用这些库
- 使用主题系统（theme system）

JavaScript框架对比-1

尝试组合使用
- 在大项目中混合使用 CSS Modules + CSS-in-JS
- 使用 Tailwind CSS（辅助类工具）提升效率
关注性能优化
- 分析样式对首屏加载的影响
- 使用 CSS Tree Shaking 减小体积
- 使用 CSS-in-JS 时注意避免重复渲染

总结

本篇文章从零开始，带你了解了两种主流的样式解决方案：

传统CSS 是最经典、最稳定的方式，适合新手入门和企业级项目。
CSS-in-JS 提供了更高的灵活性和可编程性，特别适合React等现代前端框架。

通过简单的实战案例，你学会了如何用两种方式实现按钮样式控制和主题切换功能，同时也了解了它们各自的适用场景和优缺点。

前端的旅程才刚刚开始，希望这篇文章能成为你深入探索样式世界的起点。

如果你喜欢这种实践导向的学习方式，别忘了点赞、收藏，继续关注我们后续的前端系列教程哦~ 😄

字数统计：约3933字

标签:面试题挑战实战经验前端Javascript

最热最新

暂无评论

为你推荐

暂无相关推荐

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

开篇：什么是样式方案？为什么它如此重要？

环境准备：搭建你的第一个练习环境

步骤一：创建项目目录结构

步骤二：初始化HTML文件内容

步骤三：打开本地服务器运行项目

使用VSCode安装 Live Server 插件：

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

✅ 传统CSS：分离式样式设计

示例：给按钮加上蓝色背景

优点总结：

缺点：

⚡ CSS-in-JS：样式内嵌在组件逻辑中

示例：给按钮添加蓝色背景（通过CSS-in-JS）

💡 举个小栗子对比

实战项目：打造一个可切换主题的按钮组件

📌 项目目标

方式一：使用传统CSS实现（推荐新手优先掌握）

第一步：在 `index.html` 添加两个按钮

第二步：修改 `styles.css` 文件

第三步：在 `app.js` 编写切换函数

方式二：使用CSS-in-JS实现

修改 `index.html`：

修改 `app.js` 内容如下：

新手常见问题解答（FAQ）

❓1. 为什么有时候我的样式不起作用？

❓2. CSS-in-JS需要额外安装哪些库吗？

❓3. 我应该什么时候用传统CSS？什么时候用CSS-in-JS？

❓4. 如何调试CSS-in-JS写的样式？

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

📘 推荐学习路径

总结

评论 0

为你推荐

精选内容

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

开篇：什么是样式方案？为什么它如此重要？

环境准备：搭建你的第一个练习环境

步骤一：创建项目目录结构

步骤二：初始化HTML文件内容

步骤三：打开本地服务器运行项目

使用VSCode安装 Live Server 插件：

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

✅ 传统CSS：分离式样式设计

示例：给按钮加上蓝色背景

优点总结：

缺点：

⚡ CSS-in-JS：样式内嵌在组件逻辑中

示例：给按钮添加蓝色背景（通过CSS-in-JS）

💡 举个小栗子对比

实战项目：打造一个可切换主题的按钮组件

📌 项目目标

方式一：使用传统CSS实现（推荐新手优先掌握）

第一步：在 index.html 添加两个按钮

第二步：修改 styles.css 文件

第三步：在 app.js 编写切换函数

方式二：使用CSS-in-JS实现

修改 index.html：

修改 app.js 内容如下：

新手常见问题解答（FAQ）

❓1. 为什么有时候我的样式不起作用？

❓2. CSS-in-JS需要额外安装哪些库吗？

❓3. 我应该什么时候用传统CSS？什么时候用CSS-in-JS？

❓4. 如何调试CSS-in-JS写的样式？

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

📘 推荐学习路径

总结

评论 0

为你推荐

相关推荐

精选内容

第一步：在 `index.html` 添加两个按钮

第二步：修改 `styles.css` 文件

第三步：在 `app.js` 编写切换函数

修改 `index.html`：

修改 `app.js` 内容如下：