CSS-in-JS vs 传统CSS：现代样式方案选择指南
开篇：什么是 CSS 样式方案？为什么会有“两种流派”？
在网页开发中，CSS（层叠样式表） 是用来美化网页的工具。它可以控制页面元素的颜色、形状、排列方式等外观属性。
但随着前端技术的发展，传统的写 CSS 的方式逐渐暴露出一些局限性，比如：
- 样式容易全局污染
- 组件化项目中难以维护样式作用域
- 多人协作时命名冲突频发
- 动态样式支持不强
于是，一种新的写法诞生了：CSS-in-JS。它不是替代 CSS，而是通过 JavaScript 来动态管理样式规则。你可以把它理解成：“用写代码的方式写样式”。
那么问题来了：
我是零基础的新手，该选哪种方式学呢？
这篇文章就为你讲清楚这两个技术之间的区别和联系，帮助你从零开始入门，并做出适合自己的选择。
环境准备：我们先来搭建一个最小可运行的环境
我们要对比学习，所以需要一个可以同时体验“传统CSS”和“CSS-in-JS”的小环境。
第一步：安装 Node.js 和 npm
👉 访问官网下载安装：https://nodejs.org/
推荐使用 LTS 版本。
安装完成后，在终端执行：
node -v # 显示版本号表示安装成功
npm -v
第二步：创建你的第一个 React 项目
我们将使用 Vite 快速创建一个 React + JS 项目（支持多种样式方案）：
npm create vite@latest my-styling-app --template react
cd my-styling-app
npm install
npm run dev
访问 http://localhost:5173，你会看到一个默认页面，说明项目已经启动成功。
核心概念：传统CSS与CSS-in-JS的区别
我们用最通俗的语言解释这两个概念。
一、传统CSS的工作方式
传统 CSS 就是你写的 .css 文件，然后在 HTML 或 React 中通过 className="xxx" 来应用。
示例：一个按钮组件
// App.jsx
import './App.css'
function App() {
return (
<button className="btn">点击我</button>
)
}
export default App
/* App.css */
.btn {
background-color: blue;
color: white;
padding: 10px 20px;
}
🎯 特点总结：
| 特点 | 说明 |
|---|---|
| 文件分离 | 样式和结构分开 |
| 全局作用域 | 所有类名都可能重复 |
| 编译简单 | 支持浏览器原生直接解析 |
| 可维护性较低 | 大型项目中易混乱 |
二、CSS-in-JS 的工作原理
这种方式是将样式写在 JavaScript 中，通常借助第三方库来实现。它的核心思想是：“每个组件拥有自己的样式，互不干扰”。
常见 CSS-in-JS 库包括：
- styled-components
- emotion
- stitches
- linaria
示例：用 styled-components 写按钮组件
首先安装依赖：
npm install styled-components
修改 App.jsx：
// App.jsx
import styled from 'styled-components'
const StyledButton = styled.button`
background-color: green;
color: white;
padding: 10px 20px;
font-size: 16px;
`
function App() {
return (
<StyledButton>绿色按钮</StyledButton>
)
}
export default App
🎯 特点总结：
| 特点 | 说明 |
|---|---|
| 模块化好 | 每个组件有自己的样式 |
| 防止类名冲突 | 自动生成唯一类名 |
| 动态样式的强大支持 | 可根据 props 动态变化 |
| 构建过程复杂一点 | 需要编译插件 |
实战项目：用两种方式实现一个卡片组件
我们来动手做一个简单的项目 —— 展示用户信息的卡片。
第一步：创建一个基本结构
在 App.jsx 中写一个卡片结构：
function UserInfoCard({ name, age }) {
return (
<div className="user-card">
<h3>{name}</h3>
<p>年龄：{age}</p>
</div>
)
}
并导出 App：
export default function App() {
return (
<UserInfoCard name="张三" age={28} />
)
}
方式一：传统 CSS 写法
新增文件：UserInfoCard.css
.user-card {
border: 1px solid #ccc;
padding: 20px;
max-width: 300px;
margin: 20px auto;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
然后在 UserInfoCard.jsx 中导入：
import './UserInfoCard.css'
✅ 成功了！现在你有一个带样式的卡片组件。
方式二：使用 CSS-in-JS（emotion）
安装 emotion（轻量级流行库）：
npm install @emotion/react @emotion/styled
修改 UserInfoCard.jsx：
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react'
const cardStyle = css`
border: 1px solid #ccc;
padding: 20px;
max-width: 300px;
margin: 20px auto;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border-radius: 8px;
`
function UserInfoCard({ name, age }) {
return (
<div css={cardStyle}>
<h3>{name}</h3>
<p>年龄：{age}</p>
</div>
)
}
export default UserInfoCard
📌 注意注释开头这句：
/** @jsxImportSource @emotion/react */
这是告诉系统你要用 emotion 渲染 JSX 中的样式。
✅ 现在你实现了同样的卡片，只不过用了完全不同的样式书写方式！
常见问题解答（FAQ）
下面是你作为新手可能会遇到的一些疑问，帮你扫清困惑：
❓ Q：CSS-in-JS 性能好吗？会不会很慢？
A：
CSS-in-JS 在现代框架下优化得很好，像 emotion、styled-components 都内置缓存机制。除非你极端大量动态样式，否则性能不会有明显差距。
建议初学者优先关注功能实现，而不是微优化。
❓ Q：CSS 文件和 JS 文件混在一起不会乱吗？
A：
这正是 CSS-in-JS 的优势之一！组件级封装让你更容易找到某部分对应的样式。而传统项目如果 CSS 文件太多，反而会更难管理。
❓ Q：CSS-in-JS 需要编译吗？会不会配置太复杂？
A：
大多数主流构建工具（如 Vite、Webpack）已经内建支持这些库，开箱即用。你只需要安装对应库即可，无需额外配置。
❓ Q：我以后找工作，应该学传统CSS还是CSS-in-JS？
A：
两个都要掌握基础！现在的实际项目中，两种都有使用场景：
- 如果你做的是大厂项目或开源组件库 → 推荐 CSS-in-JS
- 如果你做的是一些中小型企业站或 WordPress 主题 → 传统 CSS 更常用
掌握两者的共性和差异才是关键。
学习建议：下一步怎么深入学习？
你已经掌握了两种写法的核心思路，也完成了简单的实践。接下来可以根据兴趣方向继续深入：
🧩 方向一：深入传统CSS
如果你喜欢结构清晰、追求设计细节，可以从以下方面入手：
- CSS BEM 命名规范（防止类名冲突）
- CSS 预处理器（如 Sass / Less）
- PostCSS 插件生态
- CSS Grid & Flexbox 布局精进
📚 推荐资源：
- MDN Web Docs：https://developer.mozilla.org/zh-CN/docs/Web/CSS
- 菜鸟教程 CSS 教程
⚛️ 方向二：精通 CSS-in-JS（React 专属）
如果你专注于 React 生态、组件库开发或状态驱动样式，建议深入这些内容：
- styled-components 完全指南
- Emotion 的主题系统与 SSR 支持
- 使用 TypeScript 结合样式定义
- 自定义样式函数/条件逻辑
📚 推荐资源：
- styled-components 官网：https://styled-components.com
- Emotion 官网：https://emotion.sh
✅ 总结回顾
在本文中，我们从零讲解了：
- CSS 的基本作用
- 传统 CSS 和 CSS-in-JS 的区别
- 如何快速搭建环境进行实践
- 一个真实项目的两种写法对比
- 新手常遇到的问题及解答
- 后续的学习方向建议
你现在拥有了一个清晰的方向来选择适合自己当前阶段的技术路径。希望这篇教程帮助你在前端学习路上迈出了坚实的一步。
如果你想继续了解样式系统的进阶话题，如 CSS Modules、Tailwind CSS、CSS 变量等，请留言告诉我，我会为你准备下一章 😊
评论 0