It’s not meant to be used that way. Think more like this:

Theme and color theme set layout and colors

    .theme—-national
    .color-theme—-green
    

And then there is also themed content that has its own color theming for context cues

    article.content-theme—-education

Now what if we want to have a top-level color theme that overrides any content theme? This could be useful for accessibility (high/low contrast).

We could use !important, but that’s just asking for trouble.

However, .foo.foo saves the day:

    .color-theme—-a11y.color-theme—-a11y article

… has higher specificity than

    .theme—-national.color-theme—-green article.content-theme—-education