CSS-in-JS vs 传统CSS：现代样式方案选择指南（面向初学者）

技术拾荒者

2025-06-12 14:02

阅读 533

开篇：这是什么？我们为什么要关心？

大家好！你正在读一篇关于“CSS-in-JS 和 传统CSS”的教程。这两个名词听起来是不是有点技术感很强？其实它们都是用来给网页添加样式的不同方式。

我们知道，网页由三部分组成：

HTML：结构（比如标题、段落、按钮）
JavaScript：行为（比如点击按钮后弹出提示）
CSS：样式（比如颜色、大小、排版）

今天我们要对比的就是写CSS样式的两种主流方法：

传统CSS：就是我们在 .css 文件中写的那些代码。
CSS-in-JS：这是一种把样式直接写在 JavaScript 中的技术。

那么问题来了：我该选哪个呢？这篇文章的目的就是帮你了解这两个选项的区别，以及如何根据实际需求做出合理选择。

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

为了能动手实践，我们需要安装一些基础工具。

步骤 1：安装 Node.js 和 npm

Node.js 是一个让 JavaScript 跑在电脑上的工具，npm 是它的包管理器。访问 https://nodejs.org，下载并安装 LTS 版本即可。

检查是否安装成功，在终端输入：

node -v
npm -v

如果能看到版本号就表示成功！

步骤 2：创建项目目录

新建一个文件夹，比如叫做 style-project，然后进入这个文件夹：

mkdir style-project && cd style-project

步骤 3：初始化项目

运行以下命令来创建 package.json 文件：

npm init -y

步骤 4：安装 React（可选但推荐）

如果你想尝试现代前端框架中的 CSS-in-JS 技术，可以安装 React：

npx create-react-app .

这将创建一个基础的 React 项目。

现在我们的开发环境已经搭建完成啦！

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

我们来分别看看这两种写样式的方式。

一、传统CSS：我们最熟悉的写法

✅ 它是什么？

就是在 HTML 文件中引用外部 .css 文件，比如：

<link rel="stylesheet" href="style.css">

然后在 style.css 文件里写样式规则。

🧠 核心思想：

分离 HTML、CSS、JS 三个部分
全局作用域，容易出现类名冲突

💡 示例代码：

/* style.css */
.btn {
  background-color: blue;
  color: white;
  padding: 10px;
}

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

二、CSS-in-JS：样式也用 JS 来写

✅ 它是什么？

顾名思义，就是把样式以 JavaScript 的形式写进组件内部或模块中。

常见库有：

styled-components（React 专用）
emotion
jss
vanilla-extract（偏高级）

这些工具允许我们把样式写在 JS/JSX 文件里。

🧠 核心思想：

样式嵌入到组件内部
模块化、组件级作用域
动态样式更容易实现（例如根据状态改变颜色）

💡 示例代码（使用 styled-components）：

首先安装：

npm install styled-components

然后在组件中这样写：

// App.jsx
import styled from 'styled-components';

const MyButton = styled.button`
  background-color: green;
  color: white;
  padding: 10px;
  border-radius: 5px;
`;

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

export default App;

实战项目：做一个带样式的按钮组件，对比两种写法

项目目标：

做一个有两个按钮的页面：一个是蓝色传统CSS样式按钮，一个是绿色CSS-in-JS样式按钮。

方式一：传统CSS写法

创建文件：

index.html
style.css
app.js（作为 JS 入口）

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>传统CSS按钮</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <button class="btn-blue">蓝色按钮</button>
  <script src="app.js"></script>
</body>
</html>

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

// app.js 不写内容，只是为了测试 HTML
console.log('传统CSS加载完成');

✅ 浏览器打开后就能看到蓝色按钮啦！

方式二：CSS-in-JS写法（使用 styled-components）

创建组件：

修改 App.jsx 如下：

import styled from 'styled-components';

const GreenButton = styled.button`
  background-color: green;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
`;

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

export default App;

并在入口文件（比如 index.js）中渲染它：

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

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

✅ 运行 npm start，就可以看到绿色按钮了！

对比小结：

特性	传统CSS	CSS-in-JS
需要额外文件	✅ `.css` 文件	❌ 通常不需要单独 `.css` 文件
是否模块化	❌ 类名容易冲突	✅ 组件级作用域
是否支持动态样式	❌ 困难	✅ 支持根据变量调整样式
上手难度	✅ 简单	❗ 略微复杂，需要学习框架语法
性能表现	⚖️ 稍快（静态）	⚖️ 稍慢（生成内联样式）

常见问题解答（FAQ）

JavaScript框架对比-1

Q1：为什么有些项目用传统 CSS，有些用 CSS-in-JS？

因为它们各有适用场景：

传统CSS适合小型项目、静态网站、SEO优化要求高的网站。
CSS-in-JS更适合大型 SPA 应用（如用 React/Vue 构建），特别是当你希望组件样式隔离、动态变化。

Q2：CSS-in-JS 是不是更高级？我要不要一开始就学它？

不一定哦！对于完全零基础的同学，建议先从传统 CSS 学起，打好基础之后再过渡到 CSS-in-JS，这样理解会更深刻。

Q3：CSS-in-JS 会不会增加性能负担？

确实可能会多一点开销（比如运行时插入样式），但对于大多数项目影响不大。除非是极高性能要求的项目，才需要考虑替代方案。

Q4：我能混用两者吗？

完全可以！你可以全局用传统CSS做布局，局部用CSS-in-JS写组件样式，这种混合模式也很常见。

学习建议：接下来应该学什么？

如果你是个刚入门的小白，建议按以下顺序学习：

第一步：掌握传统CSS基础

掌握选择器（如 .class, #id）
学会盒子模型、Flex 布局、Grid 布局
使用媒体查询做响应式设计

👉 推荐资料：MDN Web 文档 - CSS

第二步：开始接触 CSS-in-JS 工具

如果你在使用 React 或 Vue：

学习 styled-components（React 推荐）
熟悉 emotion（支持多种框架）
尝试写几个组件，体会“组件样式一体化”的好处

👉 推荐资料：styled-components 官网

第三步：探索其他现代样式方案

等你熟悉基础之后，还可以尝试：

Tailwind CSS（实用类驱动的 CSS 框架）
PostCSS + 自动前缀插件
CSS Modules（介于传统CSS与CSS-in-JS之间的中间方案）

结语：没有绝对的好坏，只有合适与否

这篇文章我们讲到了：

什么是传统 CSS
什么是 CSS-in-JS
怎么用它们写出不同的按钮
各自优缺点和适用场景
新手常见疑问解答

作为初学者，不必追求“最好的方案”，而是要先学会“怎么让它工作起来”，然后逐步理解背后的设计思想。

记住一句话：好的代码，首先是可用的，其次是清晰的，最后才是高效的。

继续加油，你会成为一个优秀的前端开发者！

📌 文章长度约：2600字
📌 难度级别：初级
📌 适合人群：刚入门 Web 开发的新手

标签:后端实战经验区块链

最热最新

暂无评论

为你推荐

暂无相关推荐

CSS-in-JS vs 传统CSS：现代样式方案选择指南（面向初学者）

开篇：这是什么？我们为什么要关心？

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

步骤 1：安装 Node.js 和 npm

步骤 2：创建项目目录

步骤 3：初始化项目

步骤 4：安装 React（可选但推荐）

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

一、传统CSS：我们最熟悉的写法

✅ 它是什么？

🧠 核心思想：

💡 示例代码：

二、CSS-in-JS：样式也用 JS 来写

✅ 它是什么？

🧠 核心思想：

💡 示例代码（使用 styled-components）：

实战项目：做一个带样式的按钮组件，对比两种写法

项目目标：

方式一：传统CSS写法

创建文件：

方式二：CSS-in-JS写法（使用 styled-components）

创建组件：

对比小结：

常见问题解答（FAQ）

Q1：为什么有些项目用传统 CSS，有些用 CSS-in-JS？

Q2：CSS-in-JS 是不是更高级？我要不要一开始就学它？

Q3：CSS-in-JS 会不会增加性能负担？

Q4：我能混用两者吗？

学习建议：接下来应该学什么？

第一步：掌握传统CSS基础

第二步：开始接触 CSS-in-JS 工具

第三步：探索其他现代样式方案

结语：没有绝对的好坏，只有合适与否

评论 0

为你推荐

精选内容