CSS-in-JS vs 传统CSS：现代样式方案选择指南

开篇：什么是样式？我们为什么需要它？

在网页开发中，HTML负责内容结构，JavaScript控制交互逻辑，而CSS则负责页面的样式与外观。比如颜色、排版、按钮形状等都由CSS定义。

但随着前端技术的发展，开发者们提出了另一种新方式：在JavaScript里直接写样式，这种方式叫做 CSS-in-JS。它和传统的写法有什么不同？新手又该如何选择呢？

本文会从零开始，带你了解这两种写样式的方案，并通过简单项目帮助你直观感受它们的不同。

---

环境准备：搭建一个简单的开发环境

我们要用一个最简单的React项目来比较两种方式，所以你需要：

第一步：安装Node.js和npm

前往官网 https://nodejs.org，下载并安装 Node.js（建议选 LTS 版本）。

安装完成后，在终端输入：

node -v
npm -v

如果看到版本号，说明安装成功！

第二步：创建React项目

运行以下命令创建一个React项目：

npx create-react-app css-comparison
cd css-comparison

然后启动本地服务器：

npm start

浏览器会自动打开 http://localhost:3000，显示默认的React欢迎页。

现在我们可以开始实验了！

---

核心概念：什么是传统CSS和CSS-in-JS？

一、传统CSS的工作方式

传统CSS是外部样式表文件（.css），你在HTML中通过 <link> 标签引入，或者在组件中内联写入 <style> 标签。

优点：

• 学习成本低，几乎每个前端都会
• 所有样式集中管理，方便修改整体风格

缺点：

• 容易样式冲突（多个组件用了相同类名）
• 不够灵活，难以动态更改样式

举个例子，我们在App组件中使用传统CSS：

App.css

.my-button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

App.js

import './App.css';

function App() {
  return (
    <button className="my-button">点击我</button>
  );
}

export default App;

这样，按钮就有了蓝色背景。

---

二、CSS-in-JS是什么？

CSS-in-JS 是一种将样式作为 JavaScript 对象写在组件内部的技术。

也就是说，样式不是写在 .css 文件里，而是写在JS代码中，并且可以动态生成！

常见框架有：styled-components、emotion、linaria 等。

以 styled-components 为例：

优点：

• 组件样式封装性强，不会互相影响
• 可以根据状态动态改变样式
• 更适合现代前端开发流程

缺点：

• 初学难度略高
• 某些场景可能性能稍差
• 需要额外依赖库

示例代码：

先安装：

npm install styled-components

然后修改你的 App.js：

import styled from 'styled-components';

// 创建一个带样式的按钮组件
const MyButton = styled.button`
  background-color: green;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
`;

function App() {
  return <MyButton>绿色按钮</MyButton>;
}

export default App;

这样，你就体验了一次 在JS中写CSS 的感觉！

---

实战项目：创建两个版本的“主题切换按钮”

我们将做一个功能：点击按钮，切换网页背景色。分别用传统CSS和CSS-in-JS实现。

一、传统CSS版本

App.css

.theme-toggle {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

.dark {
  background-color: #333;
  color: white;
}

.light {
  background-color: #fff;
  color: black;
}

App.js

import './App.css';
import { useState } from 'react';

function App() {
  const [theme, setTheme] = useState('light');

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

  return (
    <div className={theme}>
      <h1>我是标题</h1>
      <button className="theme-toggle" onClick={toggleTheme}>
        切换主题
      </button>
    </div>
  );
}

export default App;

这样就能切换浅色/深色模式了！

---

二、CSS-in-JS版本（使用 styled-components）

App.js

import styled from 'styled-components';
import { useState } from 'react';

const Container = styled.div`
  background-color: ${props => (props.dark ? '#333' : '#fff')};
  color: ${props => (props.dark ? '#fff' : '#000')};
  padding: 40px;
`;

const ThemeButton = styled.button`
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
`;

function App() {
  const [dark, setDark] = useState(false);

  return (
    <Container dark={dark}>
      <h1>我是标题</h1>
      <ThemeButton onClick={() => setDark(!dark)}>切换主题</ThemeButton>
    </Container>
  );
}

export default App;

可以看到，样式可以直接根据组件的状态 dark 来变化！

---

常见问题解答

Q1：CSS-in-JS会不会让代码变得很乱？

答：刚开始可能会觉得有点混乱，但其实它是更“模块化”的方式。每个组件管理自己的样式，反而更容易维护。

---

Q2：我应该选择哪一种方式？

答：

• 如果你是前端初学者 → 建议从传统CSS开始学习
• 如果你要开发大型项目或使用React/Vue等现代框架 → 可以尝试CSS-in-JS

---

Q3：CSS-in-JS会影响网站速度吗？

答：确实有些方案会在运行时解析样式，略微增加性能开销，但大多数情况优化后影响不大。像 linaria 这样的库还能提前构建样式，提升性能。

---

Q4：有没有不需要写CSS的方法？

答：有的！你可以使用组件库如 Ant Design 或 Material UI，它们已经内置了好看的组件，你只需要调用即可。

---

学习建议：下一步该学什么？

如果你刚入门前端开发：

1. 先掌握基础HTML/CSS/JS
   • 学会盒子模型、布局（flex/grid）、选择器等基本技能
2. 尝试用React做几个小项目
   • 如任务清单、天气查询、记事本等
3. 了解CSS模块化方案
   • CSS Modules、Sass、PostCSS 等也是不错的进阶方向
4. 尝试CSS-in-JS
   • 推荐从 styled-components 开始，它对新手较友好
5. 研究UI组件库
   • 有助于快速构建界面，避免重复造轮子

---

总结

方式	是否推荐新人	适用场景	动态支持	样式隔离
传统CSS	✅ 强烈推荐	小型项目、静态页面	❌ 较弱	❌
CSS-in-JS	✅ 有基础后推荐	React/Vue项目，组件复杂时使用	✅ 强大	✅

无论哪种方式，目标都是写出清晰、可维护、美观的界面。理解它们的差异，才能在实际项目中做出合适的选择。

---

希望这篇教程能帮你理清思路，在前端道路上越走越远！如果有任何疑问，欢迎留言交流。