写前端最烦啥？
——“动画一卡、布局一崩、JS越写越厚”。
今天凌晨刷推，看到Tokopedia晒数据：他们把首页滚动动画全换成纯CSS，CPU从50%跌到2%，代码直接砍掉八成。
我当场坐直：这不就是我一直等的“前端减负”时刻？
可心里也冒出一个疑问：CSS真能一口气把JS的活全揽了？
先把话放这儿：2025年的CSS，已经不是那个只会调颜色的“美工脚本”。
它现在能监听滚动、感知容器、继承网格、反向选择父级、还能叠渐变遮罩——五招下来，JS在页面上能省就省。
先说滚动动画。
以前写scroll事件，脑子里先蹦出“防抖、节流、RAF”，写完还得祈祷安卓机别掉帧。
现在一行`animation-timeline:scroll()`，动画进度跟滚动条绑死，30%页面就播30%动画，跟进度条一样丝滑。
Tokopedia实测，iPhone 13 Pro跑一整天，电量少掉7%，这谁不心动？
再说容器查询。
以前写响应式，媒体查询只能看窗口，组件塞进弹窗就全乱。
现在给父盒子加句`
container-type:inline-size`，组件立刻学会“看脸色”：宽度小于300px就叠成卡片，大于600px秒变横排。
Google内部已经拿它做设计系统，一套组件从手表到电视都能用，设计师直接少画三套图。
Subgrid更香。
做商品列表时，标题行数不定，按钮老是对不齐。
以前得JS算高度，现在子元素直接继承父网格轨道，卡片再高也整整齐齐。
Tailwind4.0已经内置，写`subgrid`就行，设计师再改文案，我一句代码不用动。
:has()伪类简直是“父级看子脸色”的黑魔法。
星级评分以前要JS监听点击，现在CSS就能搞定：`.rating:has(.star:hover ~.star)`，鼠标滑过星星，父级实时变色，Firefox年底跟上，老项目无痛升级。
最后Mask，以前clip-path只能切几何形，现在渐变透明、SVG叠加都能玩。
我给Banner做了个波浪镂空，叠加两层渐变，十行CSS搞定，视觉同事以为我偷偷上了WebGL。
五招看完，结论很简单：2025年再写一堆JS做动画、做布局、做交互，就像在自动挡时代死磕手动挡——不是不行，只是没必要。