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

Tech架构师

2025-06-21 15:15

阅读 472

开篇：你为什么需要了解这两个技术？

在前端开发中，样式（Style） 是让网页变得好看、易用的重要因素。说到样式，大多数人首先想到的是 CSS（Cascading Style Sheets），这是一种专门为网页设计而生的语言。

但随着前端框架的发展，尤其是 React 的普及，一种新的样式方式开始流行起来：CSS-in-JS。

那问题来了，什么是 CSS-in-JS？它和传统的 CSS 有什么区别？又该什么时候选哪一种呢？

别急，我们一步一步来！

环境准备：让我们先准备好开发环境

为了更好地理解这两种技术，我们需要一个简单的工作环境来编写代码并预览效果。

所需工具：

文本编辑器：推荐使用 VS Code
Node.js 和 npm：下载地址
基础 HTML 页面 + JavaScript 脚本或创建 React 项目（如果你打算尝试 CSS-in-JS）

搭建步骤（传统方式）：

新建一个文件夹，比如叫 my-project
在里面新建两个文件：
- index.html：用于写 HTML
- style.css：用于写 CSS

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>我的第一个页面</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <h1 class="title">欢迎来到我的网站！</h1>
</body>
</html>

/* style.css */
.title {
  color: red;
}

打开浏览器，访问这个页面，你应该能看到红色标题。恭喜！你的环境已经搭建好了。

如果你想试试 CSS-in-JS，那就需要用到 React 了。

创建一个 React 项目：

npx create-react-app css-in-js-example
cd css-in-js-example
npm start

这会自动创建一个基础的 React 项目，并打开本地服务器（默认地址是 http://localhost:3000）。你就可以在里面尝试使用 CSS-in-JS 工具。

核心概念：通俗讲解两个技术的区别

1. 传统 CSS 是什么？

CSS（层叠样式表） 是专门用来控制网页外观的语言。

它通常是一个单独的 .css 文件，通过类名或标签名绑定到 HTML 元素上。

特点：

单独的 CSS 文件
使用类名来控制样式
可以全局使用（也可能引起样式冲突）
学习成本低，适合初学者

✅ 示例：给按钮添加样式

<!-- index.html -->
<button class="btn">点击我</button>

/* style.css */
.btn {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}

效果就是：一个蓝色背景、白色文字、圆角的按钮。

2. CSS-in-JS 是什么？

这是一个将样式写在 JavaScript 中的技术。也就是说，你可以像写 JS 一样写样式，然后动态应用到 DOM 上。

常见实现工具有：

styled-components
emotion
jss
aphrodite 等

这些库都支持 React 等现代前端框架。

特点：

写法更接近 JS
支持组件化开发
避免样式冲突（模块化好）
动态生成样式更容易
初学门槛略高

✅ 示例：React + styled-components 给按钮加样式

安装依赖：

npm install styled-components

在 App.js 中写：

import React from 'react';
import styled from 'styled-components';

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

function App() {
  return (
    <div>
      <StyledButton>点击我</StyledButton>
    </div>
  );
}

export default App;

刷新页面，你会看到绿色按钮！看起来和上面的例子差不多，但它其实是在 JS 中写的样式。

实战项目：做一个带有两种样式的“天气卡片”

接下来我们来做个小项目，让你感受一下两种写法的区别。目标是做一个展示当前天气信息的小卡片。

目标功能：

显示城市名、温度、天气状况（晴天/雨天等）
按钮切换“白天”和“夜间”主题

一、用传统 CSS 实现：

HTML结构：

<div class="card">
  <h2>北京</h2>
  <p class="temperature">22°C</p>
  <p class="condition">晴天</p>
  <button class="theme-toggle">切换主题</button>
</div>

CSS样式：

.card {
  width: 300px;
  padding: 20px;
  margin: 50px auto;
  background-color: #f9f9f9;
  border-radius: 10px;
  text-align: center;
  transition: background-color 0.3s ease;
}

.temperature {
  font-size: 2em;
}

.theme-toggle {
  background-color: #4CAF50;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
}

.night {
  background-color: #222;
  color: white;
}

JavaScript 控制主题切换：

const card = document.querySelector('.card');
const button = document.querySelector('.theme-toggle');

button.addEventListener('click', () => {
  card.classList.toggle('night');
});

这样就完成了一个基础版本的天气卡片！

二、用 CSS-in-JS 实现（使用 styled-components）

安装 styled-components（如果还没装的话）：

npm install styled-components

修改 App.js：

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

const Card = styled.div`
  width: 300px;
  padding: 20px;
  margin: 50px auto;
  background-color: ${props => props.isNight ? '#222' : '#f9f9f9'};
  color: ${props => props.isNight ? 'white' : 'black'};
  border-radius: 10px;
  text-align: center;
  transition: all 0.3s ease;
`;


![用户交互流程图-1](https://code-guide.oss.shanghai.autogptai.club/common/file/download?name=date2025062115/6479e6c7-38cc-4f07-99cc-0d49af36cfed.jpg)


const Temperature = styled.p`
  font-size: 2em;
`;

const ThemeButton = styled.button`
  background-color: ${props => props.isNight ? '#777' : '#4CAF50'};
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
`;

function App() {
  const [isNight, setIsNight] = useState(false);

  return (
    <Card isNight={isNight}>
      <h2>北京</h2>
      <Temperature>22°C</Temperature>
      <p className="condition">晴天</p>
      <ThemeButton isNight={isNight} onClick={() => setIsNight(!isNight)}>
        切换主题
      </ThemeButton>
    </Card>
  );
}

export default App;

运行后你会发现，无论你点击几次，颜色都能自动切换，而且样式完全封装在组件里，不需要额外写 CSS 文件。

常见问题与解答（FAQ）

Q1：CSS-in-JS 会不会太复杂？我还是新手，能不能只学传统 CSS？

✅ 当然可以！CSS 是前端的基础，任何前端开发者都要掌握。CSS-in-JS 更适合 React 等框架开发时使用，初期不建议跳过原生 CSS。

Q2：是不是用了 CSS-in-JS 就不用写 CSS 了？

✅ 不完全是。虽然写法变了，但核心的样式逻辑（颜色、布局、动画）还是一样的。只不过写法变成了 JS 的方式。

Q3：CSS-in-JS 会影响性能吗？

✅ 一般不会。主流的 CSS-in-JS 库都会做优化，比如自动缓存、服务端渲染支持等。除非极端情况，否则不用担心性能问题。

Q4：怎么选择 CSS 还是 CSS-in-JS？

✅ 看你使用的技术栈：

如果只是写静态网页 → 用传统 CSS
如果使用 React/Vue 等框架 → 推荐尝试 CSS-in-JS（如 styled-components 或 Emotion）

学习建议：下一步该怎么走？

初级阶段（你现在这个水平）

✅ 多练习 CSS 基础（盒模型、flex 布局、响应式设计）
✅ 尝试用 JS 控制 CSS 类名变化
✅ 熟悉 HTML 结构和 DOM 操作

中级阶段（想深入学习现代前端）

✅ 学习 React（或其他现代框架）
✅ 了解 CSS Modules / CSS-in-JS 方案
✅ 学习构建工具（Webpack/Vite）
✅ 尝试使用 Tailwind CSS 等现代工具

高级阶段（进阶开发）

✅ 学习高级状态管理（Redux/Zustand）
✅ 深入研究样式库的源码
✅ 掌握服务端渲染（Next.js/Nuxt）
✅ 自定义样式解决方案

总结：CSS vs CSS-in-JS，到底选谁？

对比项	传统 CSS	CSS-in-JS
写法	单独的 CSS 文件	写在 JS 中，常用于 React
适合场景	静态网页、初级项目	React 项目、组件化开发
学习曲线	低	中等
避免样式冲突能力	需要命名约定	自动隔离，模块化强
动态样式支持	较弱，需要 JS 控制	强，直接嵌入变量即可

🎯 一句话总结：
如果你刚开始学编程，从传统 CSS 入门最稳妥；如果你已经接触 React，那不妨试试 CSS-in-JS，它的模块化和组件友好性会让你事半功倍！

📚 下期预告：《Tailwind CSS vs Sass：现代 CSS 工具对比》
记得关注更新，一起进步！💪

标签:React面试题

最热最新

暂无评论

为你推荐

暂无相关推荐