前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >React 播客专栏 Vol.11|Plain CSS 如何在 React 中优雅登场?

React 播客专栏 Vol.11|Plain CSS 如何在 React 中优雅登场?

作者头像
前端达人
发布2025-05-15 11:19:59
发布2025-05-15 11:19:59
5200
代码可运行
举报
文章被收录于专栏:前端达人前端达人
运行总次数:0
代码可运行

👋 欢迎回到《前端达人 · React 播客书单》第 11 期(正文内容为学习笔记摘要,音频内容是详细的解读,方便你理解),请点击下方收听

今天我们进入前端样式化的第一课,用最传统的方式 —— Plain CSS 给组件“穿衣服”。虽然老派,但在掌握 CSS Modules 和 Tailwind 前,它是绕不过的基本功。

✅ Day 11 学习任务速览

👨‍🏫 今日聚焦:

  • 理解 React 中有哪些样式化方式
  • 用 Plain CSS 给组件加样式
  • 避雷 CSS 冲突的常见问题

💡 为什么 React 组件需要样式?

组件结构我们已经会写了,但没样式的页面,就像只有骨架没有皮肤。

  • 样式化的目标:
    • 调整布局
    • 优化配色
    • 增强用户体验

没样式的 Alert 就像没醒来的程序员,平平无奇。

🔍 样式化的四种主流方法

方法

说明

Plain CSS

最基础的写法,传统 .css 文件

CSS Modules

局部作用域的 CSS,防止冲突

CSS-in-JS

在 JS 中写样式,适合组件式开发

Tailwind

原子类风格的实用 CSS 框架

📍 本期专注:Plain CSS 入门实践

📁 什么是 Plain CSS?

就是你写过的 .css 文件,不需要花里胡哨的配置。

例如:

代码语言:javascript
代码运行次数:0
运行
复制
/* Alert.css */
.alert-container {
  padding: 10px;
  border: 1px solid gray;
}
.alert-header {
  color: navy;
  font-weight: bold;
}

然后配合 className 使用它。

🛠️ 如何给组件加上 Plain CSS?

📦 3 步搞定:

写 CSS 文件:

代码语言:javascript
代码运行次数:0
运行
复制
/* Alert.css */
.alert-container { ... }
.alert-header { ... }

组件中导入:

代码语言:javascript
代码运行次数:0
运行
复制
import './Alert.css';

JSX 中 className 使用:

代码语言:javascript
代码运行次数:0
运行
复制
<div className="alert-container">...</div>

🧠 记住:React 用 className,不是 class

⚠️ 样式冲突!Plain CSS 的隐形炸弹

Plain CSS 会把样式“注入”到全局:

  • 所有组件共享样式空间
  • 一旦多个 .css 中类名重复,比如都叫 .container,就会互相覆盖!

🧨 这就是 CSS Clashes,项目越大越容易踩雷。

🧽 怎么缓解 CSS 冲突?

虽然 Plain CSS 不支持作用域,但我们有“民间武器”:

✅ BEM 命名法

例如:

  • Alert__container → 代替 .container
  • ProductCard__header → 代替 .header

这样哪怕多个组件都有 container,也不会冲突。

🚫 缺点: 靠团队手动遵守规范,容易出锅。

✅ 小结:Plain CSS 的优缺点

👍 优点

👎 缺点

学习成本低,写法熟悉

样式是全局作用域,容易冲突

无需额外依赖,配置简单

维护成本高,需命名规范辅助

快速试验小型页面非常方便

不适合大型、多人协作项目的样式维护

🧭 下一步学习路线

🧱 Plain CSS 是起点,接下来要掌握:

  • CSS Modules:组件样式作用域隔离,从根源上解决冲突
  • CSS-in-JS:React 社区主流方式之一,更贴近组件式开发思路

🧰 工欲善其事,必先利其工具。前端样式这条路,我们才刚上路!

📌 下一期预告:深入 CSS Modules,让样式也能组件化!别走远,我们下期继续拆解!

#React #React播客 #前端达人 #前端播客 #CSS

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2025-05-15,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端达人 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • ✅ Day 11 学习任务速览
  • 💡 为什么 React 组件需要样式?
  • 🔍 样式化的四种主流方法
  • 📁 什么是 Plain CSS?
  • 🛠️ 如何给组件加上 Plain CSS?
  • ⚠️ 样式冲突!Plain CSS 的隐形炸弹
  • 🧽 怎么缓解 CSS 冲突?
    • ✅ BEM 命名法
  • ✅ 小结:Plain CSS 的优缺点
    • 🧭 下一步学习路线
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档