解决方案和组件通常使用 JavaScript 管理，但使用纯 CSS 构建。

我以前编写代码界面时，会定义结构、组件和 CSS，也习惯于考虑动画、微交互和功能性交互。这个阶段让我对一些方面产生了疑问。

在我职业生涯的早期，我并不太关注性能，相反，设计师们总是要求我为各种动画大量使用 JavaScript。
如今，性能至关重要，因为绝大多数流量都来自移动设备，如果一些简单的动画只用 JavaScript，而另一些动画却仍然需要添加状态类，那就太愚蠢了。

我想和大家分享一些我从网上学到的、并在一些项目中设计和使用的变通方法。

返回顶部

这是用 JavaScript 实现的最没用的动画之一，仅仅是为了利用滚动条的流畅效果。它只是一个简单的链接！

所以如果你通常这样写：

$("#toTop").click(function () {
   $("html, body").animate({scrollTop: 0}, 1000);
})

然后你可以写：

<style>
html {
  scroll-behavior: smooth;
}
</style>

<a href="#top">To top</a>

下拉菜单

通常，该组件的工作方式是点击其标签来打开和关闭面板，以便在面板中选择内容。
为了在不使用 JavaScript 的情况下实现这种功能，我们需要对组件进行结构化处理，使面板在移动端获得焦点或在桌面端鼠标悬停时显示。因此，面板必须嵌套在组件内部，并带有相应的visibility: hidden属性。

Scrollsnap

最近，CSS3 引入了这项新的规范，并支持跨浏览器模式。https ://caniuse.com?search
=Scroll%20snap 这能显 著节省移动设备的计算资源！
只需定义几个属性，就能让容器.child内的元素.parent以流畅的方式流动，并将其与容器的起始位置关联起来。

.parent {
  scroll-snap-type: mandatory;
  scroll-snap-points-y: repeat(300px);
  scroll-snap-type: y mandatory;
}

.child {
  scroll-snap-align: start;
}

模态

是的……这是可以实现的，只是不需要 JavaScript。
我从https://codepen.io/felipefialho找到了一个清晰的示例，它突出了开发这个组件有多么简单。
如果使用 JavaScript，我们需要点击按钮button来添加一个类modal，而只使用 CSS，我们可以将按钮用作一个link指向模态框的元素：

.modal:target:before {
  display: block;
}
.modal:target .modal-dialog {
  ...
}