👋 欢迎回到《前端达人 · React 播客书单》第 11 期(正文内容为学习笔记摘要,音频内容是详细的解读,方便你理解),请点击下方收听
今天我们进入前端样式化的第一课,用最传统的方式 —— Plain CSS 给组件“穿衣服”。虽然老派,但在掌握 CSS Modules 和 Tailwind 前,它是绕不过的基本功。
👨🏫 今日聚焦:
组件结构我们已经会写了,但没样式的页面,就像只有骨架没有皮肤。
没样式的 Alert 就像没醒来的程序员,平平无奇。
方法 | 说明 |
---|---|
Plain CSS | 最基础的写法,传统 .css 文件 |
CSS Modules | 局部作用域的 CSS,防止冲突 |
CSS-in-JS | 在 JS 中写样式,适合组件式开发 |
Tailwind | 原子类风格的实用 CSS 框架 |
📍 本期专注:Plain CSS 入门实践
就是你写过的
.css
文件,不需要花里胡哨的配置。
例如:
/* Alert.css */
.alert-container {
padding: 10px;
border: 1px solid gray;
}
.alert-header {
color: navy;
font-weight: bold;
}
然后配合 className
使用它。
📦 3 步搞定:
写 CSS 文件:
/* Alert.css */
.alert-container { ... }
.alert-header { ... }
组件中导入:
import './Alert.css';
JSX 中 className 使用:
<div className="alert-container">...</div>
🧠 记住:React 用 className
,不是 class
!
Plain CSS 会把样式“注入”到全局:
.css
中类名重复,比如都叫 .container
,就会互相覆盖!🧨 这就是 CSS Clashes,项目越大越容易踩雷。
虽然 Plain CSS 不支持作用域,但我们有“民间武器”:
例如:
Alert__container
→ 代替 .container
ProductCard__header
→ 代替 .header
这样哪怕多个组件都有 container,也不会冲突。
🚫 缺点: 靠团队手动遵守规范,容易出锅。
👍 优点 | 👎 缺点 |
---|---|
学习成本低,写法熟悉 | 样式是全局作用域,容易冲突 |
无需额外依赖,配置简单 | 维护成本高,需命名规范辅助 |
快速试验小型页面非常方便 | 不适合大型、多人协作项目的样式维护 |
🧱 Plain CSS 是起点,接下来要掌握:
🧰 工欲善其事,必先利其工具。前端样式这条路,我们才刚上路!
📌 下一期预告:深入 CSS Modules,让样式也能组件化!别走远,我们下期继续拆解!
#React #React播客 #前端达人 #前端播客 #CSS