CSS-in-JS vs 传统CSS：现代样式方案选择指南（给零基础前端新手的教程）
开篇：这个技术是什么？用来做什么？
你是不是刚开始学网页开发，对「写样式的不同方式」感到一头雾水？比如看到有人在 JavaScript 文件里写了样式，有人还在用传统 .css 文件。今天我们要聊聊的是CSS-in-JS 和 传统CSS 这两种主流的样式编写方法。
📌 简单来说：
- 传统CSS 是我们最熟悉的写法：单独写一个
.css文件，在 HTML 中引入，然后为 HTML 标签设置样式。 - CSS-in-JS 是一种新的写法：直接在 JavaScript 文件中写样式，通常配合 React 使用。
那它们有什么区别？谁更好？什么时候该选哪个？这篇文章会带你从0开始理解这个问题，并通过简单的实战项目让你体验两者的实际用法。
环境准备：准备好你的开发环境
本教程适合零基础的同学，不需要你懂太多代码，但我们需要一个能运行HTML和JS的最小环境。
步骤1：安装浏览器（推荐Chrome）
- 打开 Google Chrome 官网 下载并安装
- Chrome 有很棒的开发者工具，后面我们会用它来看页面效果
步骤2：选择一个代码编辑器（推荐VSCode）
- 下载地址：Visual Studio Code 官网
- 安装后打开即可使用
步骤3：创建我们的第一个项目目录
新建一个文件夹叫 my-css-test，结构如下：
my-css-test/
│
├── index.html
├── styles.css ← 我们一会会用到
└── main.js ← 如果要用React或CSS-in-JS的话
✅ 提示：你可以右键点击桌面 → 新建文件夹 → 命名为
my-css-test，然后用 VSCode 打开这个文件夹，创建上面三个文件。
核心概念：通俗解释两个样式方案的区别
我们先来用一句话总结一下这两个方案：
| 方案 | 写在哪里 | 示例说明 |
|---|---|---|
| 传统CSS | 单独的.css文件 |
把所有样式写在一个CSS文件中 |
| CSS-in-JS | JavaScript里 | 在JS文件中动态生成并注入样式 |
我们分别来看看它们是怎么工作的。
一、传统CSS：把样式写在 .css 文件中
💡 工作原理：
你写一个 styles.css 文件，然后在 HTML 中通过 <link> 引入它。
<!-- index.html -->
<link rel="stylesheet" href="styles.css">
然后在 styles.css 文件中写样式：
/* styles.css */
.container {
background-color: lightblue;
padding: 20px;
}
✅ 优点：
- 简单直观
- 浏览器支持好
- 学习门槛低
❌ 缺点：
- 全局污染（多个class同名会冲突）
- 难以模块化
- 动态样式不方便（比如根据不同状态变颜色）
二、CSS-in-JS：在JavaScript中写样式
这听起来有点奇怪吧？不过其实非常强大！
我们在 JS 里定义样式对象，然后把它插入到 HTML 页面中。
例如，我们可以在 React 项目中这样写：
// main.jsx 或 App.jsx
const buttonStyle = {
backgroundColor: 'lightgreen',
padding: '10px 20px',
border: 'none',
borderRadius: '5px'
};
function App() {
return <button style={buttonStyle}>点我</button>;
}
export default App;
或者用一些流行的库如 styled-components 或 emotion 来写：
import styled from 'styled-components';
const Title = styled.h1`
color: darkblue;
font-size: 24px;
`;
function App() {
return <Title>这是一个标题</Title>;
}
✅ 优点：
- 支持动态样式（比如根据用户行为改变颜色）
- 自动模块化（不用担心 class 名冲突）
- 更容易维护大规模项目
❌ 缺点：
- 初学者不太习惯（写法看起来“怪”）
- 初次加载可能稍慢一点
- 学习曲线略陡
实战项目：对比两种写法实现同一个效果
我们来做一个小项目：一个按钮，点击后可以切换主题色（蓝/黄）。
我们将分别用 传统CSS 和 CSS-in-JS 来实现，并比较它们的写法差异。
实战项目 Part 1：用传统CSS实现主题切换按钮
Step 1：写 HTML 和初始样式
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>传统CSS样式切换</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="app">
<button onclick="toggleTheme()">切换主题</button>
<h1 id="title">Hello, CSS!</h1>
</div>
<script src="main.js"></script>
</body>
</html>
/* styles.css */
.dark-theme {
background-color: #333;
color: white;
}
.light-theme {
background-color: #fff;
color: black;
}
// main.js
function toggleTheme() {
const title = document.getElementById('title');
title.classList.toggle('dark-theme');
title.classList.toggle('light-theme');
}
✅ 效果：点击按钮，文字背景和颜色会切换。
实战项目 Part 2：用CSS-in-JS实现主题切换按钮（React + inline style）
我们来试试在 React 组件中用内联样式的办法。
Step 1：确保你已经安装了 React 环境（可参考 Create React App 搭建）
如果你还没搭建过，可以用以下命令快速创建一个新项目：
npx create-react-app my-cssinjs-demo
cd my-cssinjs-demo
npm start
Step 2：修改 App.js
// App.js
import React, { useState } from 'react';
import './App.css';
function App() {
const [isDark, setIsDark] = useState(false);
const darkStyle = {
backgroundColor: '#333',
color: 'white',
padding: '20px',
transition: 'all 0.3s'
};
const lightStyle = {
backgroundColor: '#fff',
color: 'black',
padding: '20px',
transition: 'all 0.3s'
};
return (
<div style={isDark ? darkStyle : lightStyle}>
<h1>Hello, CSS-in-JS!</h1>
<button onClick={() => setIsDark(!isDark)}>切换主题</button>
</div>
);
}
export default App;
✅ 效果一样：点击按钮，背景和字体颜色切换。
小结对比：
| 方法 | 写法方式 | 是否方便动态样式 | 是否模块化 | 是否需要额外安装 |
|---|---|---|---|---|
| 传统CSS | 分离 .css 文件 |
较麻烦 | 否 | 不需要 |
| CSS-in-JS | 在JS中写样式或用框架 | 很方便 | 是 | 可能需要装库 |
常见问题解答：新手常见疑惑
❓ Q1：为什么说传统CSS会有全局污染？
比如你在两个不同的组件里都用了 .title 这个 class，样式可能会互相覆盖，导致混乱。这就是所谓的“全局污染”。
❓ Q2：CSS-in-JS 性能会不会差很多？
对于小型项目几乎感觉不到差别。但在大型项目中，CSS-in-JS 的动态样式更灵活，性能损耗也可以接受。
❓ Q3：我现在该学哪种？
- 如果你是初学者，建议先学 传统CSS，打好基础；
- 如果你已经在用 React 或 Vue，学习 CSS-in-JS 能提升你的项目组织能力。
❓ Q4：CSS-in-JS 是不是都要用 React？
不一定！虽然最常见是在 React 中使用（如 styled-components），但在其他框架中也有实现（Vue + emotion 等）。
❓ Q5：能不能混着用？
当然可以！你可以用一部分传统CSS，也用CSS-in-JS来解决动态部分。
学习建议：下一步怎么学？
现在你已经有了初步认识，接下来建议你按下面这个路径继续深入：
🧭 初级阶段（你现在所处的水平）
- 掌握 HTML/CSS 基础语法（盒子模型、布局等）
- 尝试用传统CSS完成简单页面设计（个人主页、博客页面等）
- 对比几种 CSS-in-JS 库的使用方式（styled-components、emotion、JSS）
🧭 中级阶段
- 学习如何在 React 中优雅地使用 CSS-in-JS
- 理解什么是 “scoped”（局部作用域）样式
- 掌握媒体查询、动画等高级CSS技巧在CSS-in-JS中的用法
🧭 高级阶段
- 自己封装 UI 组件库（使用CSS-in-JS）
- 理解主题系统（Theme）、响应式设计
- 探索性能优化和代码拆分策略（懒加载样式）
总结：该怎么选择？
| 你当前的目标 | 推荐使用方式 | 理由 |
|---|---|---|
| 学习前端基础（HTML/CSS） | 传统CSS | 更简单、基础扎实 |
| 开发 React 项目 | CSS-in-JS | 更好的封装性和模块化 |
| 快速做原型/展示页面 | 两者都可以 | 视项目复杂度而定 |
| 想打造自己的组件库 / 主题系统 | CSS-in-JS | 更灵活，便于复用和管理 |
🎉 至此，你已经了解了 传统CSS 和 CSS-in-JS 的基本区别，并亲自完成了两个版本的小项目。别担心一开始看不懂，编程就是不断练习、尝试的过程。继续加油，你一定会成为很棒的前端工程师！
如果你想进一步了解 CSS-in-JS 的更多细节，欢迎阅读我们后续的进阶文章《CSS-in-JS 深入解析与实战》。
评论 0