CSS mixins idea using pseudo class

I have been searching through issues to get an idea in how css mixins could be implemented in a future CSS specification. The goal is to avoid having to add class names to elements from CSS frameworks, but instead use semantic selectors and assign a style for each element.

In short, replace a danger class that puts the element in red with a CSS mixin (whatever the syntax) that can pull the red color property from elsewhere. I have been looking in particular at the @apply rule and I still have open questions about it in https://github.com/w3c/csswg-drafts/issues/532#issuecomment-744442925 and ideas in https://github.com/w3c/csswg-drafts/issues/5624#issuecomment-744469507

If the idea is to keep the way CSS is structured right now, conditionals at the top level with @supports and @media, selectors below and then properties, mixin matching could be done at the selector level using a pseudo-class. For example:

#my-error-message {
  mixin: danger message;
}

:mixin(danger) {
  background-color: red;
}

div:mixin(message) {
  border: thin black solid;
}

span:mixin(message) {
  text-decoration: underline;
}

This is pretty self-explaining, the mixin CSS property defines a list of words that can be then matched by the :mixin() pseudo-class.

I first imagined that any property could be matched and using custom properties to achieve similar result:

#my-error-message {
  --mixin-danger: on;
  --mixin-message: on;
}

:defines(--mixin-danger: on) {
  background-color: red;
}

:defines(--mixin-message: on) {
  border: thin black solid;
}

A problem with that is that the custom property is inherited by default and it would be logical for :defines(--mixin-danger: on) to match #my-error-message and its descendants. For mixins to be usable we need to avoid matching descendants.

Start by reviewing the linked discussions in CSSWG issues 532 and 5624, then compare the proposed :mixin() and :defines() examples in this issue. Any follow-up would need to resolve inheritance and matching semantics and produce an agreed CSS specification design; no concrete file or test is identified.