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
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
- Swap a class, class swaps value of a custom property
- Swap the value of a custom property
- 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
You can support CSS-Tricks by being an MVP Supporter.