这是一个来自 Phuoc Nguyen 的不错的网站,我之前注意到他 非常擅长 创建巧妙的网站。 这个 vs. 那个 将不同的相关概念作为文章主题进行对比。例如,CSS 有 display: none;
、opacity: 0;
和 visibility: hidden;
,它们表面上都“隐藏”某些内容,但它们在重要的方面都截然不同,需要理解。 这是一篇文章。内容 是开源的,如果您想添加任何内容。
这让我想起了 Adam Thompson 的这个 Pen
这个 Pen 所做的只是设置一些药丸盒的颜色,但它以七种不同的方式做到这一点——在这种情况下,没有一种比另一种“更好”。
- 切换类
- 切换类,颜色定义在 Sass
@mixin
中 - 切换类,类切换自定义属性的值
- 切换自定义属性的值
- 切换自定义属性的值,颜色仅存储在 JavaScript 中
- 设置内联样式
- 操作 CSSOM
- 设置非标准颜色属性
它们最终都做同样的事情。并且可能还有更多:更改上层父元素的类。使用 data-*
属性。使用某种色相偏移滤镜。使用 JavaScript 中的颜色数学来操作色相。使用复选框技巧来更改样式。当然,甚至还有数十种其他方法。