CSS-in-JS vs 传统CSS：现代样式方案选择指南（零基础入门）

大家好，我是你们的老朋友——一个在大厂摸爬滚打3年、业余时间在B站分享前端干货的UP主。最近收到不少私信：“面试官问我 CSS-in-JS 和普通 CSS 有啥区别，我直接懵了”、“我想做个 GitHub 上能展示的项目，但不知道该用哪种样式方案”。看到这些问题，我立马就想起了自己刚入行时的窘迫——我也曾对着一行 CSS 搞不懂为什么没生效，更别提什么“现代样式方案”了。

所以今天，我就用最通俗的语言+最实在的代码，带你彻底搞懂 CSS-in-JS vs 传统 CSS 这个前端必考题。无论你是求职新手、想优化产品体验的产品经理，还是准备上传 GitHub 项目的自学者，这篇教程都能帮你做出明智选择！

---

一、什么是 CSS-in-JS？它和传统 CSS 到底有啥不同？

先说结论：

• 传统 CSS：就是你写 .css 文件，然后在 HTML 里 <link> 引入。
• CSS-in-JS：把 CSS 写在 JavaScript 文件里，比如 React 组件中。

听起来很玄？其实核心就一点：样式的“组织方式”变了。

特性	传统 CSS	CSS-in-JS
文件位置	单独的 .css 文件	写在 JS/JSX 文件中
作用域	全局（容易冲突）	默认局部（组件级隔离）
动态能力	需要 JS 操作 class	直接用 JS 变量控制样式
打包体积	通常更大（包含未使用样式）	按需注入，更小

💡 举个生活化的例子：
传统 CSS 就像你在公共洗衣房洗衣服——所有人的衣服混在一起，万一标签掉了就分不清是谁的。
CSS-in-JS 就像你在家用洗衣机——只洗自己的衣服，绝对不会搞混！

---

二、环境准备：5 分钟搭好开发环境

🛠️ 注意：本教程使用 React + Vite 作为基础框架（目前最主流的组合），但原理适用于任何现代前端项目。

步骤 1：安装 Node.js

去 https://nodejs.org 下载 LTS 版本（长期支持版），安装后终端输入：

node -v
npm -v

看到版本号就说明装好了。

步骤 2：创建 React 项目

npm create vite@latest my-style-project -- --template react
cd my-style-project
npm install

步骤 3：安装 CSS-in-JS 库（以 styled-components 为例）

npm install styled-components

✅ 完成！现在你可以运行 npm run dev 启动项目了。

---

三、核心概念：用最简单的代码讲清楚区别

场景：做一个“动态颜色按钮”

方案 1：传统 CSS 写法

1. 创建 Button.css：

/* src/components/Button.css */
.primary {
  background-color: blue;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
}

.danger {
  background-color: red;
  color: white;
}

2. 在组件中使用：

// src/components/Button.jsx
import './Button.css';

export default function Button({ variant = 'primary', children }) {
  return (
    <button className={variant}>
      {children}
    </button>
  );
}

✅ 优点：简单直观，适合静态样式。
❌ 缺点：如果我想根据 props 动态改 padding？得再加 class！

---

方案 2：CSS-in-JS 写法（styled-components）

// src/components/StyledButton.jsx
import styled from 'styled-components';

const StyledButton = styled.button`
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: ${props => props.variant === 'danger' ? 'red' : 'blue'};
  color: white;
`;

export default function Button({ variant = 'primary', children }) {
  return <StyledButton variant={variant}>{children}</StyledButton>;
}

✅ 优点：

• 样式和逻辑写在一起，不用切文件
• 直接用 JS 表达式控制样式（比如 ${props.variant}）
• 自动避免命名冲突（每个组件样式独立）

🎯 关键理解：CSS-in-JS 的本质是 用 JS 函数生成 CSS，所以你能用所有 JS 能力（变量、条件、循环）来写样式！

---

四、实战项目：做一个“主题切换器”（GitHub 友好型）

我们来做一个能切换亮/暗主题的小产品，非常适合放进你的 GitHub 作品集！

步骤 1：创建 ThemeContext（管理全局主题）

// src/context/ThemeContext.jsx
import { createContext, useState, useContext } from 'react';

export const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prev => prev === 'light' ? 'dark' : 'light');
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

export const useTheme = () => useContext(ThemeContext);

步骤 2：用 CSS-in-JS 实现主题化按钮

// src/components/ThemeButton.jsx
import styled from 'styled-components';
import { useTheme } from '../context/ThemeContext';

const Button = styled.button`
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  background: ${props => props.theme === 'dark' ? '#333' : '#f0f0f0'};
  color: ${props => props.theme === 'dark' ? '#fff' : '#333'};
  cursor: pointer;
`;

export default function ThemeButton() {
  const { theme, toggleTheme } = useTheme();
  
  return (
    <Button theme={theme} onClick={toggleTheme}>
      切换到 {theme === 'light' ? '暗色' : '亮色'}主题
    </Button>
  );
}

步骤 3：在 App.jsx 中组合

// src/App.jsx
import { ThemeProvider } from './context/ThemeContext';
import ThemeButton from './components/ThemeButton';

function App() {
  return (
    <ThemeProvider>
      <div style={{ padding: '20px' }}>
        <h1>我的主题切换器</h1>
        <ThemeButton />
      </div>
    </ThemeProvider>
  );
}

export default App;

🚀 现在运行项目，点击按钮就能切换主题！而且所有样式都封装在组件内部，不会污染全局，非常适合做模块化产品。

---

五、新手常见问题解答（FAQ）

Q1：CSS-in-JS 会不会让项目变慢？

答：早期确实有性能问题，但现在主流库（如 styled-components, Emotion）都做了深度优化。对于 99% 的应用，性能差异可以忽略不计。反而因为按需加载，首屏可能更快！

Q2：我该在求职项目中用哪种？

答：看公司技术栈！

• 如果面的是传统企业（银行、政府项目）→ 用传统 CSS 或 SCSS
• 如果面的是互联网大厂/创业公司 → CSS-in-JS 是加分项（尤其 React 技术栈）
• GitHub 项目建议：两种都做！比如主功能用 CSS-in-JS，再单独开个分支演示传统 CSS 实现，展示你的技术广度。

Q3：CSS Modules 算哪边？

答：CSS Modules 是传统 CSS 的“局部作用域”解决方案（.button__primary__xyz123 这种命名）。它不算 CSS-in-JS，但解决了全局污染问题。如果你不想引入新库，它是很好的折中方案。

---

六、学习建议 & 避坑指南

📌 给初学者的路线图

1. 先掌握传统 CSS（盒模型、Flex、Grid）——这是地基！
2. 学会 CSS Modules（Vite/React 默认支持）
3. 再尝试 CSS-in-JS（推荐 styled-components 或 Emotion）
4. 最后了解 Tailwind CSS（另一种现代方案）

⚠️ 避坑提醒

• 不要为了用新技术而用：如果项目很简单（比如静态博客），传统 CSS 更合适。
• 警惕过度嵌套：CSS-in-JS 里写太多层级会让代码难维护，保持扁平！
• 记得抽离通用样式：比如按钮、卡片等，做成可复用的 styled-component。

🔗 推荐资源

• GitHub 搜索关键词：react css-in-js example
• 我的 B 站视频：《从零实现一个 CSS-in-JS 库》（手把手造轮子）
• 官方文档：styled-components.com

---

结语：选择没有对错，只有合适

回到开头的问题：CSS-in-JS vs 传统 CSS，到底选哪个？

我的答案是：看场景、看团队、看产品需求。

• 做内部管理系统？传统 CSS + Bootstrap 够快够稳。
• 做面向用户的高交互产品？CSS-in-JS 能让你写出更健壮、可维护的代码。
• 准备 GitHub 作品集？两者都试试，展示你的技术判断力才是求职关键！

最后送大家一句话：工具永远服务于人，而不是人被工具绑架。理解每种方案背后的“为什么”，比死记硬背语法重要一百倍。

如果你觉得这篇教程有帮助，欢迎点赞收藏，也欢迎来我 B 站主页交流～下期我们聊聊 “如何用 CSS-in-JS 实现动画”！