暗色主题

虽然直觉上暗色主题好像是一种定制业务逻辑，但其实因为暗色主题太过于普遍，以至于操作系统和浏览器都内置实现了，而 CSS 也实现了对应的方法判断当前系统的主题到底是亮色还是暗色：prefers-color-scheme。

所以如果系统要实现暗色系主题，最好可以和操作系统设置保持一致，这样用户体验也会更好：

@media (prefers-color-scheme: light) {
  /** ... */
}
@media (prefers-color-scheme: dark) {
  /** ... */
}
@media (prefers-color-scheme: no-preference) {
  /** ... */
}

如果使用 Checkbox 勾选是否开启暗色主题，也可以仅用 CSS 变量判断，核心代码是：

#checkboxId:checked ~ .container {
  background-color: black;
}

~ 这个符号表示，selector1 ~ selector2 时，为选择器 selector1 之后满足 selector2 条件的兄弟节点设置样式。

精读

除了上面例子外，笔者再追加几个例子。

幻灯片滚动

幻灯片滚动即每次滚动有固定的步长，把子元素完整的展示在可视区域，不可能出现上下或者左右两个子元素各出现一部分的 “割裂” 情况。

该场景除了用浏览器实现幻灯片外，在许多网站首页也被频繁使用，比如将首页切割为 5 个纵向滚动的区块，每个区块展示一个产品特性，此时滚动不再是连续的，而是从一个区块到另一个区块的完整切换。

其实这种效果无需Javascript实现：

.html {
  scroll-snap-type: y mandatory;
}
.child {
  scroll-snap-align: start;
}

这样便将页面设置为精准捕捉子元素滚动位置，在滚轮触发、鼠标点击滚动条松手或者键盘上下按键时，scroll-snap-type: y mandatory 可以精准捕捉这一垂直滚动行为，并将子元素完全滚动到可视区域。

颜色选择器

使用 HTML 原生就能实现颜色选择器：

该选择器的好处是性能、可维护性都非常非常的好，甚至可以捕捉桌面的颜色，不好的地方是无法对拾色器进行定制。

总结

关于 CSS 可以实现哪些原本需要Javascript做的事，有很多很好的文章，但并不是读了这些文章，我们就要尽量用 CSS 实现所有能做的事，那样也没有必要。CSS 因为是描述性语言，它可以精确控制样式，但却难以精确控制交互过程，对于标准交互行为比如幻灯片滑动、动画可以使用 CSS，对于非标准交互行为，比如自定义位置弹出 Modal、用 svg 绘制完全自定义路径动画尽量还是用Javascript。

另外对于交互过程中的状态，如果需要传递给其他元素响应，还是尽量使用Javascript实现。虽然 CSS 伪类可以帮我们实现大部分这种能力，但如果我们要监听状态变化发一个请求什么的，CSS 就无能为力了，或者我们需要非常 trick 的利用 CSS 实现，这也违背了 CSS 技术选型的初衷。

最后，能否在合适的场景选择 CSS 方案，也是技术选型能力的一种，不要忘了 CSS 适用的领域，不要什么功能都用Javascript实现。

来源： 前端精读评论