昨天下午我决定做个实验：把一个完整的用c页小型网站，全部用CSS和HTML实现，用c页不写一行JavaScript。用c页结果让我自己都吃了一惊——那个原本需要几百行JS的用c页交互效果，最后用十几行CSS就搞定了。用c页这让我重新思考，用c页我们对“动态”的用c页定义是不是太狭隘了。

先看一个具体例子。用c页我想做个折叠面板，用c页点击标题展开内容。用c页传统做法是用c页JS监听click事件，切换class。用c页但CSS里有个:checked伪类，用c页配合一个隐藏的用c页checkbox，就能实现同样的效果。代码长这样：

<input type="checkbox" id="toggle1" class="toggle"> <label for="toggle1" class="panel-head">点我展开</label> <div class="panel-body">内容在这里</div>

CSS部分只需要写.panel-body { display: none; }和.toggle:checked ~ .panel-body { display: block; }。没有事件监听，没有DOM操作，纯声明式逻辑。我第一次跑通这个模式时，盯着浏览器愣了几秒——原来“交互”可以这么纯粹。

再说布局。Flexbox和Grid已经让“圣杯布局”变成了历史名词。以前用float加负margin，现在一行display: grid; grid-template-columns: 200px 1fr 200px;就完事。但真正让我觉得痛快的是aspect-ratio属性。想做个16:9的视频容器？aspect-ratio: 16/9;搞定，不用再玩padding-top百分比那套把戏了。

当然，CSS也不是万能的。比如实现一个实时搜索过滤列表，纯CSS方案就得靠filter加:focus-within，但只能做简单的文本匹配。真要按多个条件排序，还是得回到JS。不过话说回来，80%的网页“动态效果”其实都是展示性的——弹窗、下拉菜单、轮播图、标签切换，这些CSS都能做，而且代码量更少，还不会因为JS加载失败而白屏。

有个细节特别有意思：CSS的scroll-behavior: smooth能实现平滑滚动，但配合scroll-margin-top可以避免固定导航栏遮挡标题。这种细枝末节，以前谁会想到用CSS管滚动行为？浏览器厂商这些年真没闲着，从@supports做特性检测，到:has()选择器（现在终于能选“包含某个子元素的父元素”了），CSS的复杂度已经逼近一门真正的编程语言。

但别误会，我不是劝你扔掉JS。复杂状态管理、数据交互、动画编排，JS依然是王者。我的意思是：当你下次接到“做个简单的活动页”这种需求时，不妨先问自己——非得用框架吗？非得引入那300KB的依赖吗？有时候一个静态页面，加上几个CSS小技巧，反而更轻快、更可靠、更容易维护。

最后说个真实场景。上周我帮朋友改一个公司官网，原项目用React写的，光首屏加载就要3秒。我重构后，全部静态HTML加CSS，首屏0.4秒。功能一点没少——导航、轮播、折叠菜单、表单验证（用:valid伪类做的）。朋友看完代码惊呼：“这玩意儿不用编译？”我笑了笑，想起那句话：最好的工具，是让你感觉不到工具存在的工具。

CSS和HTML写网页，就像用毛笔写字——工具简单，但功夫在细节。你写下的每一行选择器，每一个属性，都是在和浏览器直接对话。没有中间层，没有虚拟DOM，有的只是纯粹的文档流和层叠规则。这种朴素的力量感，是框架永远给不了的。