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

代码写到发光

2025-06-28 13:49

阅读 631

开篇：简单介绍这个技术是什么，用来做什么

在网页开发中，CSS（层叠样式表） 是专门用来美化页面的“化妆师”。它决定了字体、颜色、间距等视觉效果。而随着前端工程的发展，出现了两种主流写CSS的方式：

传统CSS：使用独立的 .css 文件书写样式。
CSS-in-JS：直接在 JavaScript 文件中写样式代码。

本教程会带大家了解这两种方式的区别，并通过简单的例子帮助你找到适合自己的学习方向。

环境准备：详细的开发环境搭建步骤

我们要从零开始写一个小程序，来比较两种方式的实际差别。所以先准备好基础开发环境。

步骤 1：安装 Node.js 和 npm

访问 https://nodejs.org，下载并安装 LTS 版本（长期支持版本）。安装完成后，在终端输入以下命令验证是否安装成功：

node -v
npm -v

出现类似 v18.17.1 表示安装成功。

步骤 2：创建项目目录

打开终端，执行以下命令创建新项目文件夹：

mkdir my-style-demo
cd my-style-demo

步骤 3：初始化项目

运行以下命令，生成 package.json 文件：

npm init -y

步骤 4：安装 React（用于演示 CSS-in-JS）

我们用 React 来展示 CSS-in-JS 的实际应用，安装如下：

npm install react react-dom

再安装一个最流行的 CSS-in-JS 库：styled-components

npm install styled-components

步骤 5：创建入口 HTML 文件和 JS 文件

新建 index.html 文件内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Style Demo</title>
</head>
<body>
  <div id="root"></div>
  <script type="module" src="./app.js"></script>
</body>
</html>

前端性能优化图表-1

创建 app.js 文件：

import React from 'react';
import ReactDOM from 'react-dom/client';

const App = () => {
  return (
    <div>
      <h1>Hello, Style!</h1>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

现在你可以用浏览器打开 index.html 看到页面了！

核心概念：用通俗的语言解释关键概念

这一部分我们会分别讲解传统 CSS 和 CSS-in-JS 的基本用法，并对比它们的特点。

传统CSS：熟悉的经典方式

什么是传统CSS？

传统CSS就是在单独的 .css 文件中写样式规则。HTML 页面通过 <link> 标签或 <style> 标签引用这些样式。

示例代码

新建一个 styles.css 文件：

.greeting {
  color: blue;
  font-size: 24px;
}

然后修改 app.js 文件：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './styles.css'; // 引入样式

const App = () => {
  return (
    <div className="greeting">
      Hello, I'm styled with traditional CSS!
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

保存后刷新页面，就能看到蓝色大字。

✅ 优点：

学习成本低
浏览器兼容性好
所有开发者都熟悉

❌ 缺点：

全局命名冲突问题（比如多个组件用了同名类）
难以模块化和维护

CSS-in-JS：在JS里写样式的新方式

什么是 CSS-in-JS？

CSS-in-JS 是一种将样式定义嵌入到 JavaScript 代码中的做法，使组件和样式的逻辑更紧密地绑定在一起。

常见库举例

styled-components
emotion
JSS
Tailwind（虽然不是CSS-in-JS，但思路相似）

我们这里用 styled-components 来演示。

示例代码

修改 app.js 文件：

import React from 'react';
import ReactDOM from 'react-dom/client';
import styled from 'styled-components';

// 使用 styled-components 创建带样式的组件
const Greeting = styled.div`
  color: green;
  font-size: 24px;
`;

const App = () => {
  return (
    <Greeting>
      Hello, I'm styled using CSS-in-JS!
    </Greeting>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

刷新页面，你会看到绿色的大字。

✅ 优点：

组件与样式高度解耦（模块化更强）
动态样式支持良好
自动处理全局命名问题

❌ 缺点：

初学时需要适应新语法
某些工具链配置较复杂

实战项目：跟着教程一步步完成一个简单项目

我们现在要实现一个“按钮点击计数器”，用两种方式分别实现看看。

第一部分：用传统CSS实现

Step 1：新建 styles.css

.counter-button {
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.counter-display {
  margin-top: 10px;
  font-size: 20px;
}

Step 2：修改 app.js

import React, { useState } from 'react';
import ReactDOM from 'react-dom/client';
import './styles.css';

const CounterApp = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <button className="counter-button" onClick={increment}>
        Click Me
      </button>
      <div className="counter-display">You clicked {count} times</div>
    </div>
  );
};


![CSS动画效果展示-2](https://code-guide.oss.shanghai.autogptai.club/common/file/download?name=date2025062813/db72e5df-e571-4e6d-9828-aa08447cec97.jpg)


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<CounterApp />);

🎉 运行效果：一个按钮加一个数字显示，每次点击数字+1。

第二部分：用 styled-components 实现

修改 app.js 文件如下：

import React, { useState } from 'react';
import ReactDOM from 'react-dom/client';
import styled from 'styled-components';

const CounterButton = styled.button`
  padding: 10px 20px;
  background-color: #e74c3c;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
`;

const CounterDisplay = styled.div`
  margin-top: 10px;
  font-size: 20px;
`;

const CounterApp = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <CounterButton onClick={increment}>Click Me</CounterButton>
      <CounterDisplay>You clicked {count} times</CounterDisplay>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<CounterApp />);

✅ 这种方式把样式写得更直观、更接近逻辑本身。

常见问题：新手容易遇到的问题和解决方案

❓ Q1：为什么我的CSS没生效？

原因：

可能是选择器优先级不对
类名写错了或者没有引入CSS文件
组件标签名大小写不一致（React要求组件名首字母大写）

🔧 解决方法：

使用浏览器开发者工具检查元素样式
确保类名拼写正确
确认是否引入了对应CSS文件（或 styled-components 是否导入正确）

❓ Q2：CSS-in-JS 真的比传统CSS更好吗？

答：没有绝对的好坏，要看场景。

适用情况	推荐方式
初学者入门	传统CSS 更易理解
小型静态页面	传统CSS 足够
复杂React项目	CSS-in-JS 更模块化
需要动态主题切换	CSS-in-JS 更灵活

❓ Q3：能不能同时用传统CSS和CSS-in-JS？

答：当然可以！很多项目都混合使用，比如公共样式用传统CSS，个性化组件用 styled-components。

学习建议：下一步的学习路径建议

你现在已经掌握了 CSS 的两种核心写法，也完成了第一个小项目。接下来推荐你继续深入学习以下几个方向：

✅ 方向一：进一步掌握 React + CSS-in-JS 工程实践

学习使用 styled-components 的 props 控制样式（如根据状态变化样式）
实践多个组件的样式复用和继承
结合主题系统（theme）

✅ 方向二：强化对传统CSS的理解

学习 Flexbox / Grid 布局
深入理解层叠规则、盒子模型
学习使用 BEM 命名规范提升可读性

✅ 方向三：尝试其他样式方案

Tailwind CSS：实用工具类式写法
Emotion：另一种流行 CSS-in-JS 框架
CSS Modules：传统CSS的一种改进写法

总结一下

特点	传统CSS	CSS-in-JS（如 styled-components）
上手难度	简单	中等（需学React基础）
样式封装程度	全局影响，易冲突	模块化高，自动作用域隔离
动态样式支持	较弱，需配合JavaScript	强，直接传props即可改变样式
调试体验	可用浏览器开发者工具	一样方便
社区生态	成熟稳定	发展迅速，社区活跃

🎯 初学者建议：先学传统CSS打基础，再接触 CSS-in-JS，这样过渡更自然。

如果你是想进入 React 生态体系的开发者，那么 CSS-in-JS 是值得投入时间的方向之一；而对于制作小型项目、静态网页来说，传统CSS依然是快速高效的首选。

希望这篇教程可以帮助你迈出第一步 🚀！

📌 附注：完整项目代码可在 GitHub 或本地自行测试，后续也可以加入更多高级功能练习，例如添加动画、响应式设计等。

标签:运营算法React

最热最新

暂无评论

为你推荐

暂无相关推荐

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

开篇：简单介绍这个技术是什么，用来做什么

环境准备：详细的开发环境搭建步骤

步骤 1：安装 Node.js 和 npm

步骤 2：创建项目目录

步骤 3：初始化项目

步骤 4：安装 React（用于演示 CSS-in-JS）

步骤 5：创建入口 HTML 文件和 JS 文件

核心概念：用通俗的语言解释关键概念

传统CSS：熟悉的经典方式

什么是传统CSS？

示例代码

CSS-in-JS：在JS里写样式的新方式

什么是 CSS-in-JS？

常见库举例

示例代码

实战项目：跟着教程一步步完成一个简单项目

第一部分：用传统CSS实现

Step 1：新建 styles.css

Step 2：修改 app.js

第二部分：用 styled-components 实现

常见问题：新手容易遇到的问题和解决方案

❓ Q1：为什么我的CSS没生效？

❓ Q2：CSS-in-JS 真的比传统CSS更好吗？

❓ Q3：能不能同时用传统CSS和CSS-in-JS？

学习建议：下一步的学习路径建议

✅ 方向一：进一步掌握 React + CSS-in-JS 工程实践

✅ 方向二：强化对传统CSS的理解

✅ 方向三：尝试其他样式方案

总结一下

评论 0

为你推荐

精选内容