CSS-in-JS vs 传统CSS：现代样式方案选择指南
开篇：理解CSS的两种写法风格
你有没有发现，网页上的文字可以居中，图片能自动调整大小，颜色和排版还特别有“设计感”？这些，都是CSS在起作用。
但在前端开发的世界里，写CSS的方式也在不断进化。我们今天要聊聊两个常见的样式管理方式：
- 传统CSS：就是你在
<style>标签或者.css文件里写的那些代码。 - CSS-in-JS：一种把CSS写进JavaScript文件里的新方式，越来越流行。
这篇文章会帮你从零开始认识这两种写法，并通过一个简单项目告诉你它们各自的优缺点，让你在实际使用时知道怎么选。
环境准备：搭建你的第一个本地开发环境（VS Code + HTML 文件）
🛠️ 目标：创建一个基本的HTML页面用于练习CSS与JS。
1. 安装 VS Code
前往官网 https://code.visualstudio.com 下载安装 Visual Studio Code（简称 VS Code），它是一款免费、功能强大的代码编辑器。
2. 创建项目文件夹
新建一个名为 my-css-project 的文件夹，在里面创建两个文件：
my-css-project/
├── index.html
└── styles.css
3. 编写简单的 HTML 结构
在 index.html 中输入以下内容：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS实战教程</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>你好，样式世界！</h1>
<button id="btn">点击变色</button>
<script src="script.js"></script>
</body>
</html>
暂时不需要 script.js，后面我们会用到。
4. 运行你的页面
在 VS Code 安装完后，安装插件 Live Server（可以在扩展商店搜索）。然后右键点击 index.html → “Open with Live Server”，这样你就可以在浏览器中直接查看并实时更新页面。
现在你可以打开浏览器看到页面了。
核心概念对比：什么是传统CSS？CSS-in-JS又是什么？
✅ 传统CSS：样式与结构分离的经典方式
这是最经典也最常被初学者学习的方法：HTML负责结构，CSS负责样式。
示例：给按钮添加背景色和字体加粗
在 styles.css 文件中加入：
#btn {
background-color: blue;
color: white;
font-weight: bold;
}
刷新浏览器，你会看到按钮是蓝色带白色字、字体加粗。
🟩 优点：
- 学习门槛低，资料丰富。
- 可维护性较强（尤其是小项目）。
- 所有样式统一管理。
🟥 缺点：
- 随着项目变大容易混乱（比如命名重复）。
- 难以实现组件级别的动态样式控制（比如点击按钮改变颜色需要操作DOM）。
✨ CSS-in-JS：更现代化的写法
这是一种把样式写在 JavaScript 文件里的新方式，尤其适合使用 React、Vue 或其他组件化框架的项目。
常见库包括：
- styled-components（React常用）
- emotion
- JSS
- Aphrodite
示例：用内联对象定义样式
先来试试最基础的写法，不依赖任何库，纯JavaScript实现样式注入。
修改你的页面，加上 <style id="dynamicStyle"> 标签：
<style id="dynamicStyle"></style>
然后在根目录下新建 script.js 文件，写入如下代码：
// 获取 style 标签
const styleTag = document.getElementById("dynamicStyle");
// 构造一段 CSS 字符串
const dynamicCSS = `
#btn {
background-color: purple;
color: yellow;
border-radius: 5px;
padding: 10px 20px;
}
`;
// 把样式插入页面
styleTag.innerHTML = dynamicCSS;
// 添加交互：点击后修改样式
document.getElementById("btn").addEventListener("click", () => {
styleTag.innerHTML = `
#btn {
background-color: green;
color: orange;
}
`;
});
点击一下按钮，你会发现按钮变了颜色！
💡 这种方式就是在 JS 中“写CSS”，属于 CSS-in-JS 思想的简化实现。
当然，生产中我们通常会借助一些库来更好地组织代码。
实战项目：做一个“可变色主题切换”按钮
这个项目将帮助你亲身体验传统CSS和CSS-in-JS的用法区别。
第一步：传统CSS方案实现
在 styles.css 中定义两套按钮样式：
.dark-theme {
background-color: black;
color: white;
}
.light-theme {
background-color: white;
color: black;
border: 1px solid #ccc;
}
并在 index.html 按钮上设置默认类：
<button id="btn" class="dark-theme">切换主题</button>
在 script.js 中写入切换逻辑：
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
if (btn.classList.contains("dark-theme")) {
btn.classList.remove("dark-theme");
btn.classList.add("light-theme");
} else {
btn.classList.remove("light-theme");
btn.classList.add("dark-theme");
}
});
✅ 成果：点击按钮切换深色/浅色。
第二步：尝试 CSS-in-JS 写法
这次我们不在外部 .css 文件里定义样式了，而是全部放在JS中。
首先清空 styles.css，再删除 <link rel="stylesheet"... 的那一行。
在 script.js 中改写为以下内容：
const styleTag = document.getElementById("dynamicStyle");
function applyTheme(theme = "dark") {
let css = "";
if (theme === "dark") {
css = `
#btn {
background-color: darkblue;
color: white;
padding: 10px 20px;
border-radius: 8px;
}`;
} else {
css = `
#btn {
background-color: lightgray;
color: black;
padding: 10px 20px;
border-radius: 8px;
}`;
}
styleTag.innerHTML = css;
}
applyTheme(); // 初始加载暗色主题
document.getElementById("btn").addEventListener("click", () => {
const isDark = styleTag.innerHTML.includes("darkblue");
applyTheme(isDark ? "light" : "dark");
});
🎯 效果完全一样，但样式全部由JS动态生成！
哪个更好？来看看它们的区别
| 特点 | 传统CSS | CSS-in-JS |
|---|---|---|
| 学习难度 | 简单直观 | 略微复杂（涉及JS） |
| 动态能力 | 弱（需手动操作class） | 强（样式可编程） |
| 复用程度 | 一般 | 更高，可在函数中封装 |
| 适用范围 | 简单项目或静态页 | 动态、组件化项目（如React） |
| 工具支持 | 浏览器原生支持 | 需引入库 |
新手常见问题解答 💬
❓Q1：为什么推荐使用 CSS-in-JS？
- 因为它可以动态生成样式，方便根据用户行为或状态变化进行实时样式更改。
- 更适合组件式开发，避免全局样式污染。
❓Q2：学哪个好呢？
- 对于刚入门的同学建议优先掌握传统 CSS，打好基础；
- 如果你想进一步深入 React / Vue 等现代框架，强烈建议学习 CSS-in-JS，未来更有发展潜力。
❓Q3：会不会写得乱？
- 如果没有规范，确实容易出错；
- 推荐配合工具如 Emotion（React中）或 Tailwind JIT 来辅助书写。
下一步学习建议：逐步构建你的技能树 🧱
📝 入门路线图
第一阶段：掌握传统CSS
- 使用 DevTools 检查和调试样式
- 熟悉盒模型（margin, padding, border等）
- 掌握布局方法：flex、grid、position
第二阶段：学会使用变量和模块化
- 学习使用 CSS 自定义属性（变量）
- 尝试使用 BEM/CSS Modules 方法组织大型项目中的样式
第三阶段：尝试使用CSS-in-JS库
- 在 React/Vue 项目中引入 styled-components 或 Emotion
- 封装可复用的“带样式的组件”
- 体验如何用JS逻辑决定样式（如动画条件渲染）
小结
在这篇文章中，我们带你了解了两种主流的样式管理方式：
- 传统CSS：熟悉、易读、适合初学者；
- CSS-in-JS：灵活强大，适应现代前端需求。
不论你选择哪条路，记住一点：
代码是给人看的，偶尔给机器跑一下。
所以写出清晰、整洁、易于维护的代码才是终极目标。如果你希望继续挑战自己，我建议你尝试在一个小型项目中结合两者使用，看看哪种风格更适合你！
接下来，你可以试着做一两个带交互的小页面，比如“待办清单”、“天气预报卡片”、“个人主页”——在实战中进步最快哦 😄！
✅ 附录：本文完整代码整理地址（GitHub Gist 或 CodePen）请自行补充
🔍 关键词搜索建议：intro to CSS-in-JS for beginners
评论 0