This vs. That

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: CodePen Embed Fallback 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 classSwap a class, colors defined in Sass @mixinSwap a class, class swaps value of a custom propertySwap the value of a custom propertySwaps the value of a custom property, colors stored in JavaScript onlySet inline stylesManipulate the CSSOMSet 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. Direct Link to Article — Permalink The post This vs. That appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read the rest This vs. That

Read at the original Source: css tricks.