## 💡 技巧一：CSS 变量实现动态主题

别再写死颜色值了！CSS 变量让主题切换变得异常简单。

**实操步骤：**
1. 在 :root 中定义全局变量
2. 在需要切换的主题类中重定义变量
3. 用 JS 切换 class：document.body.classList.toggle(‘dark-mode’)

## 🚀 技巧二：Intersection Observer 实现懒加载

别再监听 scroll 事件了！Intersection Observer 性能提升 10 倍。

**使用场景：** 图片懒加载、无限滚动

## ⚡ 技巧三：CSS Grid 一行代码居中

还在用 margin: 0 auto？Grid 让你一行搞定：place-items: center

## 🎯 技巧四：防抖节流优化性能

输入框实时搜索？加个防抖避免频繁请求。

**使用场景：**
– 搜索框输入
– 窗口 resize
– 表单验证

## 🔥 技巧五：CSS 滚动捕捉打造丝滑体验

让横向滚动像原生 APP 一样流畅，滑动停止时自动对齐到最近的 item。

## 📝 总结

| 技巧 | 适用场景 | 难度 |
|——|———-|——|
| CSS 变量 | 主题切换 | ⭐ |
| Intersection Observer | 图片懒加载 | ⭐⭐ |
| Grid 居中 | 布局排版 | ⭐ |
| 防抖节流 | 性能优化 | ⭐⭐ |
| 滚动捕捉 | 移动端滚动 | ⭐ |

**金句：** 好的前端不是炫技，而是用简单的方式解决复杂的问题。

_觉得有用？点赞收藏，下期分享更多实战技巧！_