CSS-in-JS vs 传统CSS：现代样式方案选择指南
开篇：什么是 CSS 样式技术？它们的作用是什么？
在我们开发一个网页或者 Web 应用时，HTML负责结构（骨架），JavaScript负责行为（动作），而CSS则负责外观（样式）。这三者缺一不可。
传统的 CSS 技术是将样式写在一个或多个.css文件中，然后通过 HTML 引入。然而，随着前端技术的发展，尤其是 React 这类组件化框架的流行，一种新的方式逐渐兴起 —— CSS-in-JS，即在 JavaScript 中编写样式。
这两种方式各有优劣，也适用于不同的项目需求。本教程将会：
- 帮助你理解 CSS-in-JS 和传统 CSS 的区别；
- 教你搭建环境并实践两种方式；
- 指导你完成一个小项目；
- 解决初学者常见问题；
- 提供进一步学习建议。
环境准备：一步步带你搭建开发环境
步骤 1：安装 Node.js 和 npm
CSS-in-JS 往往依赖于现代工具链，所以我们需要 Node.js 和 npm（Node 包管理器）来支持构建。
👉 下载地址
安装完成后，在终端输入以下命令验证是否成功：
node -v
npm -v
如果出现版本号（如 v18.0.0 和 9.0.0），说明安装成功。
步骤 2：创建你的第一个项目文件夹
新建一个项目目录：
mkdir css-vs-ciss-in-js-tutorial
cd css-vs-ciss-in-js-tutorial
初始化项目：
npm init -y
步骤 3：安装基础开发工具
我们使用 Vite 来快速启动开发服务器。Vite 是一款现代、速度快的前端构建工具。
安装 Vite：
npm create vite@latest
# 输入项目名称后选择 vanilla（纯 JavaScript）或 react（React 模板）
然后进入项目目录并安装依赖：
cd your-project-name
npm install
最后，启动开发服务器：
npm run dev
现在打开浏览器访问 http://localhost:5173，你应该能看到一个欢迎页面。
核心概念：CSS-in-JS 与传统 CSS 的本质区别
为了让大家更轻松地理解这两个概念，我们可以用下面这个表格做个对比：
| 特点 | 传统 CSS | CSS-in-JS |
|---|---|---|
| 语法 | 单独 .css 文件 |
在 JavaScript 中使用对象或模板字符串定义样式 |
| 引入方式 | 通过 <link> 标签引入 |
通过 JavaScript 导入和注入 |
| 组件隔离性 | 不够灵活，容易样式冲突 | 高度封装，样式只作用于当前组件 |
| 动态样式支持 | 需配合 JS 脚本实现 | 内置变量、条件判断等动态特性支持 |
| 工具链支持 | 基础但成熟 | 更现代，插件丰富 |
| 学习成本 | 简单易学 | 初期上手复杂一些 |
📌 小贴士：你可以把传统 CSS 想象成给整个家刷墙（样式共享），而 CSS-in-JS 更像是每个房间都单独定制墙壁颜色（局部定制）。
实战项目：从零开始做一个按钮组件体验两者的差异
我们将用传统 CSS和CSS-in-JS分别实现一个“可点击的按钮”，看看两者在实际编码中有哪些不同。
项目目标
创建一个按钮，功能如下：
- 默认绿色背景
- 悬浮时变深绿
- 点击后变灰色，并禁用点击
方式一：使用传统 CSS + HTML 实现
第一步：创建文件结构
my-button/
├── index.html
├── style.css
└── main.js
第二步：编辑 HTML 和 CSS
📄 index.html：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>传统 CSS 按钮</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<button id="myButton">点击我</button>
<script src="main.js"></script>
</body>
</html>
📄 style.css：
#myButton {
background-color: green;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
#myButton:hover {
background-color: darkgreen;
}
📄 main.js：
const btn = document.getElementById("myButton");
btn.addEventListener("click", () => {
btn.disabled = true;
btn.style.backgroundColor = "gray";
});
✅ 成果：一个基本的交互按钮就完成了！
方式二：使用 CSS-in-JS（以 styled-components 为例）
📌
styled-components是最受欢迎的 CSS-in-JS 库之一，它允许你在 JSX 中直接使用带样式的组件。
第一步：安装 styled-components
如果你之前选的是 React 模板，继续操作：
npm install styled-components
第二步：在 React 中创建按钮组件
📄 src/main.jsx（入口文件）：
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
📄 src/App.jsx：
import React, { useState } from 'react';
import styled from 'styled-components';
// 创建带样式的按钮组件
const StyledButton = styled.button`
background-color: green;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
&:hover {
background-color: darkgreen;
}
`;
function App() {
const [isDisabled, setIsDisabled] = useState(false);
return (
<StyledButton
disabled={isDisabled}
onClick={() => setIsDisabled(true)}
style={{ backgroundColor: isDisabled ? 'gray' : '' }}
>
点击我
</StyledButton>
);
}
export default App;
✅ 成果：同样是功能齐全的按钮，但是这一次样式和逻辑都在一起了！
对比总结
| 项目 | 传统 CSS | CSS-in-JS |
|---|---|---|
| 文件数量 | 至少三个文件（HTML / CSS / JS） | 通常两个文件（JSX + JS） |
| 动态控制样式 | 需要用 JS 操作样式 | 支持直接在 JS 中写内联样式 |
| 可维护性 | 容易样式污染，需命名规范 | 样式高度封闭，不易出错 |
| 开发效率 | 简洁直观 | 上手略慢但后期高效 |
| 适合人群 | 初学者优先 | 中高级开发者，React 项目必备技能 |
📌 总结一句话：“传统 CSS 简单直接，CSS-in-JS 灵活现代。”
常见问题答疑区 ✅
Q1：CSS-in-JS 是不是必须用 React？
❌ 不是。虽然很多 CSS-in-JS 框架（如 styled-components）最初是为了 React 设计的，但也有一些库可以用于 Vue、Svelte 甚至原生 JS。
Q2：CSS-in-JS 会导致性能下降吗？
✅ 合理使用不会。现代框架优化得非常好，除非有极端大量重复渲染，否则不会对性能造成明显影响。
Q3：CSS-in-JS 会增加项目体积吗？
🔍 会稍微增加一点，因为引入了一个额外的库，但可以通过代码压缩和 Tree Shaking 减小影响。
Q4：传统 CSS 是否过时了？
🚫 没有过时！至今仍有大量大型网站使用传统 CSS 或其预处理器（如 Sass、Less）。它是基础中的基础，不应忽视。
学习建议：如何继续深入学习？
掌握了这两种方式之后，建议你按照以下几个方向继续深入：
🧠 推荐学习路径
| 阶段 | 学习内容 |
|---|---|
| 入门 | HTML/CSS 基础知识（MDN 文档、菜鸟教程） |
| 进阶 | 使用 BEM 命名法提升样式组织能力 |
| 深入 | 学习 Sass、Tailwind CSS、PostCSS 等现代 CSS 工具 |
| 架构进阶 | 掌握 React、Vue 等框架与 CSS-in-JS 的集成 |
| 专题研究 | 主题切换、动画效果、媒体查询、响应式设计等 |
💡 推荐资源
- MDN Web Docs：https://developer.mozilla.org/zh-CN/
- W3Schools：https://www.w3schools.com/
- styled-components 官方文档：https://styled-components.com/
- FreeCodeCamp 免费课程：https://www.freecodecamp.org/
结语：选择最适合你的风格就是最好的
无论是传统 CSS 还是 CSS-in-JS，都没有绝对的好坏，只有适用场景的差别。
- 如果你是刚入门的小白，先掌握基础的 HTML 和 CSS 是最稳妥的选择。
- 如果你要使用 React 开发组件化的应用，不妨试试 CSS-in-JS，你会发现它的强大与灵活。
希望这篇图文并茂的讲解，能帮助你迈出前端样式学习的第一大步！
📘 练习建议：
- 自己动手尝试修改按钮颜色、大小、字体
- 尝试添加更多交互效果（比如点击弹窗、加载状态）
- 探索 styled-components 的主题系统（ThemeProvider）来实现全局换肤
🎉 下一期主题预告：《用 Tailwind CSS 快速打造响应式布局》
敬请期待~
评论 0