You have buttons on your website. These can be on a light background, or a dark background, and have active and non-active states, but should be highly visible in any variation. You might think that means you need four CSS rules, but James does a great job of showing some tricks that mean you can achieve all of that with just one (plus a couple of custom properties). Simple tools, like inherit, are used to great effect. I mean I rarely use that attribute, yet James make it look like an indispensable superpower! 😅 Very clever indeed and a strong argument for why using the cascade to your advantage is often more beneficial than completely destructuring it with systems like BEM.
Remember, every time you set a property in CSS you are in fact overriding something (even if it’s just the default user agent styles). In other words, CSS code is mostly expressing exceptions to a default design. The more you do so, the more your UI components become sealed-off blocks of UI that don’t necessarily blend into or adapt to their surroundings.
