[micromacrofoot]

I feel like utility classes had their moment and we can now start to pull back towards semantic CSS with the help of new features like CSS custom properties.

Instead of .f-green in your HTML you can do --f-green in your CSS.

<header class="f-green"></header>

would become

header { color: var(--f-green); }

or if you really hate CSS and must stay in HTML

<header style="var(--f-green)"></header>

Though the literal naming is a touch too specific anyway. Something like this is wonderful:

--f1-color: green;

header { color: var(--f1-color); }

then you don't have to do confusing things like

header .f-green { color: red; }

because you can do

header { --f1-color: red; }

So we can be less specific AND more modular... because you can have that f1 (font1) color be red in your header, and still do:

footer { --f1-color: green; }

We can make really flexible and extensible systems with modern vanilla CSS. No frameworks or preprocessors needed.