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

👋 欢迎回到《前端达人 · 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 文件，不需要花里胡哨的配置。

例如：

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

然后配合 className 使用它。

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

📦 3 步搞定：

1. 写 CSS 文件：

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

2. 组件中导入：

   import './Alert.css';

3. 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 社区主流方式之一，更贴近组件式开发思路

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

如果你觉得今天的内容实用，欢迎点赞、收藏或转发给一起学 React 的朋友。

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

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