用懒加载、滚动揭示动画、无限滚动三个实战，讲清 IntersectionObserver 的配置项与回调在主线程、防抖等关键注意事项。

CSS 变量（Custom Properties）用 :root 定义、var() 取值，支持级联覆盖与 calc() 联动，配合 [data-theme] 一行切换即可实现全局主题与暗黑模式，比预处理器变量更动态。

CSS Grid 是二维网格布局系统，通过 grid-template 定义行列轨道、用网格线编号与 grid-area 命名区域定位，fr 分配剩余空间，repeat()+auto-fit+minmax() 实现零媒体查询的响应式自适应列。