[ArchieMaclean]

I think the hard part with this is that because CSS properties are so context-dependent, the compiler would have to somehow figure out a way to translate your simple property into the correct one, without knowing how your HTML is structured.

For example:

.thing { topgap: 10 }

.other { topgap: 10 }

Would have to compile to different things if .thing was in a flexbox and .other was in a grid or a box. Since a lot of HTML is dynamically generated, we don't actually "know" this, and specifying which to use yourself ahead of time defeats the purpose, since you may as well just use the normal CSS properties. This could however work with completely static HTML. Maybe some JavaScript solution could hack on dynamic CSS but I would be sceptical of accessibility and performance in that case.

In the precompiled case, unless all the CSS was outputted using a very limited subset of CSS along with a large "base" CSS file, I don't quite know how it would work.

I hope somebody proves me wrong!

[eyelidlessness]

This is a case where build tools surprisingly shine. Example: if you use Fela (CSS-in-JS atomic style library), but build statically, it has all the context it needs to determine optimal order of rules and which rules are actually in use… but you can pipe the styles wherever you want at build time and eliminate the runtime for anything static.

(I use this on my site. It’s suboptimal for build and could use a mountain of refactor. But the source is up on my GH if anyone’s curious)