You are writing if/then code in CSS: that should be in JavaScript.

Do you feel that way about media queries? Hover states? Focus styles? Disabled styles? Validity checks? Heck, every selector is an if/then statement. If the selector matches, do the styles.

you could have been handled the situation much easier, and with less code, with a class. style=”–variant: 1;” is class1 and style=”–variant: 2;” is class2. Your code would be simpler and easier to read

I agree class changes are a very clear way to change the state of something. But changing the value of a custom property in CSS is a different beast entirely. You could change a custom property because of a :has() selector, or a media query, or a state change, or a million other things. In those cases, you don’t have the ability to change a class in the HTML. But with a style query, you can still change a whole chunk of styles when the custom property changes.

You’re correct! Thank you. Selecting within the class exhibits the issue more clearly:
https://codepen.io/chriscoyier/pen/oNOpqJK

However, please note that in “Scoping”, the example given with the three embedded divs and light/dark classes does not work. Contrary to what the article says, “some text” will use the “light” style. I am guessing this is an overly simplified version of the example given on the MDN page for @scope, which is slightly more convoluted: https://developer.mozilla.org/en-US/docs/Web/CSS/@scope#how_scope_conflicts_are_resolved