Here’s a nice site from Phuoc Nguyen, who I’ve noted before has quite a knack for clever sites. This vs. That pits different related concepts against each other as a theme for an article. For example, CSS has display: none;, opacity: 0;, and visibility: hidden; and they all, on the surface “hide” something, but they are all markedly different in ways that are important to understand. That’s one of the articles. The content is open source as well, if you feel like adding anything.
This reminds me of this Pen from Adam Thompson:
All that Pen is doing is setting the colors of some pill boxes, but it does it in literally seven different ways — in this case, none of them are “better” than another:
- Swap a class
- Swap a class, colors defined in Sass
@mixin - Swap a class, class swaps value of a custom property
- Swap the value of a custom property
- Swaps the value of a custom property, colors stored in JavaScript only
- Set inline styles
- Manipulate the CSSOM
- Set a non-standard color attribute
They all ultimately do the same thing. And there could be many more: change class on a higher-up parent. Use data-* attributes. Use some kind of hue-shifting filter. Use color math in JavaScript to manipulate hues. Use the checkbox hack to change styling. Surely there are even dozens more.