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

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

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

✅ Day 11 学习任务速览

👨‍🏫 今日聚焦：

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

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

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

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

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

🔍 样式化的四种主流方法

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

📁 什么是 Plain CSS？

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

例如：

/* Alert.css */
.alert-container {
  padding: 10px;
  border: 1px solid gray;
}
.alert-header {
  color: navy;
  font-weight: bold;
}

然后配合 className 使用它。

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

📦 3 步搞定：

写 CSS 文件：

/* Alert.css */
.alert-container { ... }
.alert-header { ... }

组件中导入：

import './Alert.css';

JSX 中 className 使用：

<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