CSS-in-JS vs 传统CSS：现代样式方案选择指南
作者：一位前端讲师
面向对象：零基础初学者
全文字数：约2500字
一、开篇：什么是 CSS 和 CSS-in-JS？
在网页开发中，**CSS（Cascading Style Sheets）**是用来控制网页外观的语言。它负责“美化”HTML元素，例如设置字体颜色、背景色、排版方式等等。
而随着前端技术的发展，一种新的写样式的方式——CSS-in-JS开始流行起来。它的核心思想是：把样式直接写进JavaScript代码中，而不是像传统CSS那样通过外部或内部的.css文件来定义样式。
✅ 通俗理解：
- 传统CSS：你写一个
.css文件，然后链接到 HTML 页面上。 - CSS-in-JS：你在 JavaScript 文件中，用 JavaScript 的方式来写样式。
它们各有优势和适用场景。本文会带你从零开始了解这两者，并动手实践一个小项目！
二、环境准备：搭建你的第一个测试环境
为了方便演示和练习，我们使用最简单的 HTML + JavaScript 环境，不需要复杂的框架。
步骤1：创建项目目录结构
my-css-project/
├── index.html
└── style.js
步骤2：编写 index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>CSS-in-JS vs 传统CSS</title>
<!-- 这里先空着 -->
</head>
<body>
<div id="app"></div>
<script type="module" src="./style.js"></script>
</body>
</html>
这样我们就有了一个基础的HTML页面，可以用来测试CSS样式和JS动态添加样式的功能了。
三、核心概念对比与讲解
下面我们将分别讲解 传统CSS 和 CSS-in-JS 的基本用法和原理。
1️⃣ 传统CSS 使用示例
我们来创建一个按钮组件并美化它。
第一步：在 index.html 中添加结构
<button class="btn">我是传统CSS按钮</button>
第二步：新建 styles.css 并引入
.btn {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
在 HTML <head> 中加入：
<link rel="stylesheet" href="styles.css" />
打开浏览器就能看到绿色按钮了！
✅ 小结：
- 优点：简单直观，适合小项目
- 缺点：容易命名冲突，维护成本高（尤其是在大项目中）
2️⃣ CSS-in-JS 基本概念 & 示例
CSS-in-JS 的意思是，在 JavaScript 中写样式，通常借助一些库，比如：styled-components 或 emotion，也可以手动操作 DOM 样式。
这里我们先用纯 JS 来模拟最简单的实现方式：
修改 style.js：
// 创建一个按钮元素
const btn = document.createElement("button");
btn.textContent = "我是CSS-in-JS按钮";
// 设置样式
btn.style.backgroundColor = "#2196F3";
btn.style.color = "white";
btn.style.padding = "10px 20px";
btn.style.border = "none";
btn.style.borderRadius = "5px";
btn.style.fontSize = "16px";
btn.style.cursor = "pointer";
// 把按钮插入页面
document.getElementById("app").appendChild(btn);
刷新页面，你会看到另一个蓝色按钮出现了！
✅ 小结：
- 优点：样式随组件逻辑一起封装，避免全局污染
- 缺点：写法更复杂，需要一定的JavaScript基础，样式不易复用（如果不借助工具）
四、实战项目：做一个“点击变颜色”的计数器按钮
我们将实现一个按钮，点击一次数字加一，并且根据点击次数切换背景颜色。
我们会用两种方式来实现这个功能，以便你对比两种方式的异同。
🧩 方式1：传统CSS 实现
HTML 结构
<div>
<button id="counterBtn" class="counter-btn">点击我: <span id="count">0</span></button>
</div>
CSS 样式 (styles.css)：
.counter-btn {
background-color: #f44336;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
.counter-btn.active {
background-color: #4CAF50;
}
JS 控制逻辑（style.js）：
let count = 0;
const btn = document.getElementById('counterBtn');
const span = document.getElementById('count');
btn.addEventListener('click', () => {
count++;
span.textContent = count;
if (count % 2 === 0) {
btn.classList.add('active');
} else {
btn.classList.remove('active');
}
});
🧩 方式2：CSS-in-JS 实现
这次我们直接在 JS 中操作样式：
修改 index.html，清空原按钮：
<div id="app"></div>
在 style.js 中完整实现：
let count = 0;
const btn = document.createElement("button");
const span = document.createElement("span");
btn.textContent = "点击我: ";
span.textContent = count;
btn.appendChild(span);
// 初始样式
btn.style.backgroundColor = "#f44336";
btn.style.color = "white";
btn.style.padding = "10px 20px";
btn.style.border = "none";
btn.style.borderRadius = "5px";
btn.style.fontSize = "16px";
btn.style.cursor = "pointer";
btn.addEventListener("click", () => {
count++;
span.textContent = count;
if (count % 2 === 0) {
btn.style.backgroundColor = "#4CAF50";
} else {
btn.style.backgroundColor = "#f44336";
}
});
document.getElementById("app").appendChild(btn);
📌 总结实战项目差异
| 特性 | 传统CSS | CSS-in-JS |
|---|---|---|
| 样式管理 | 外部CSS文件集中管理 | 样式嵌入到组件中 |
| 维护难度 | 简单但易混乱 | 更可控、适合组件化 |
| 学习门槛 | 低，适合新手 | 需要一定JS基础 |
五、常见问题解答（FAQ）
❓ 1. 传统CSS会不会被淘汰？
不会。传统CSS至今仍是所有网站的基础。即使用了CSS-in-JS，最终还是生成普通的CSS应用到DOM上。
❓ 2. 我应该先学哪种？
建议先掌握传统CSS的基本语法，然后再学习CSS-in-JS。因为它是基于JS的，所以你需要对JavaScript有一定了解。
❓ 3. CSS-in-JS 是不是必须用框架？
不一定。你可以用原生JS写内联样式，也可以用一些流行的 CSS-in-JS 库如 styled-components 或 emotion。这些库能提供更好的可维护性和可读性。
❓ 4. 如何调试CSS-in-JS写的样式？
打开浏览器的开发者工具（按 F12 或右键审查元素），一样可以看到对应的DOM元素及其样式，只不过有些样式是运行时动态生成的。
六、学习建议：下一步怎么学？
恭喜你已经完成了第一课的内容！接下来的学习路径可以这样安排：
✅ 推荐学习顺序：
- 巩固HTML/CSS基础
- 掌握盒子模型、定位、Flexbox、Grid等
- 熟练使用JavaScript操作DOM
- 包括事件绑定、动态修改样式等
- 学习构建现代React/Vue组件
- 这些框架天然支持 CSS-in-JS
- 尝试使用 CSS-in-JS 库
- 比如 styled-components 或 emotion
📚 推荐资源：
- MDN Web 文档（developer.mozilla.org）
- FreeCodeCamp（免费前端教程）
- YouTube 视频搜索关键词：“CSS in JS 入门”
七、结尾语
无论你是想做简单的网页设计，还是未来想成为专业的前端工程师，理解和掌握 传统CSS 与 CSS-in-JS 的区别都是非常重要的一步。
希望这篇入门指南能帮你少走弯路，快速上手这两个方向的选择和使用！
如果你喜欢这种风格的教学，欢迎留言告诉我，我会继续写更多类似的主题哦~ 😄
评论 0