I am very glad because you took your time to create an example. Now we can understand each other better.

What I would do in your example is:

-primary {

border: 1px solid #000;

border-radius: 4px;

color: #fff;

font-weight: bold;

background: #ffa500;

}

-secundary {

border: 1px solid #000;

border-radius: 4px;

color: #000;

background: #808080;

}

<button class="-primary">... </button>

<button class="-secondary">... </button>

The only point one could complain is that I am repeating the declaration of border and border-radius. But it takes very little space and lets the code more readable (all declarations in one place only) and more maintainable (I can change the style of a button without disturbing the style of another button).

I have improved my system, the article doesn't reflect this. Now, except for the resetting style sheet, I don't attach CSS to tags anymore - only to classes. There are 3 layers of classes: molecular, submolecular and atomic. The latter layers override the former layers.

Please note, it is NOT like Tailwind, that makes everything atomically.

For solving your question, I used two molecular classes (-primary and -secundary).

The new system is described in the section "Writing CSS — the golden rules" of https://medium.com/gitconnected/solving-all-css-layout-issues-any-screen-any-root-font-size-without-js-62349644a71e