这个 vs. 那个

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费额度!

这是一个来自 Phuoc Nguyen 的不错的网站,我之前注意到他 非常擅长 创建巧妙的网站。 这个 vs. 那个 将不同的相关概念作为文章主题进行对比。例如,CSS 有 display: none;opacity: 0;visibility: hidden;,它们表面上都“隐藏”某些内容,但它们在重要的方面都截然不同,需要理解。 这是一篇文章。内容 是开源的,如果您想添加任何内容。

这让我想起了 Adam Thompson 的这个 Pen

这个 Pen 所做的只是设置一些药丸盒的颜色,但它以七种不同的方式做到这一点——在这种情况下,没有一种比另一种“更好”。

  1. 切换类
  2. 切换类,颜色定义在 Sass @mixin
  3. 切换类,类切换自定义属性的值
  4. 切换自定义属性的值
  5. 切换自定义属性的值,颜色仅存储在 JavaScript 中
  6. 设置内联样式
  7. 操作 CSSOM
  8. 设置非标准颜色属性

它们最终都做同样的事情。并且可能还有更多:更改上层父元素的类。使用 data-* 属性。使用某种色相偏移滤镜。使用 JavaScript 中的颜色数学来操作色相。使用复选框技巧来更改样式。当然,甚至还有数十种其他方法。

直接链接 →