Could almost just instead add a class to your html, and at the same place as the markup add a style tag inline writing exactly what you need. Css doesn't have to be one huge chunk. So instead of
<div class="lots of stuff">... or <div style="lots of stuff">...
That's basically how elm-css[0] does it. One writes css in the attributes of elements, and then when it's converted to DOM-stuff the css is extracted and classes created (or reused if similar). Since it's all elm-code one can reuse variables, call functions, import styles from somewhere etc
If you do it that way you have to give a name to everything. Imagine writing javascript but every expression has to have a name, its all globally scoped, and one expression cannot refer to another one by name. There's a lot of utility in not having to name everything
Sure, that solves the problem, but is still very verbose and doesn't really help with consistency by itself.
At this point one has to ask themselves if they're "avoiding inline styles" (or anything that looks like it) for a true technical reason, or just because of cargo-culting.
That's basically how elm-css[0] does it. One writes css in the attributes of elements, and then when it's converted to DOM-stuff the css is extracted and classes created (or reused if similar). Since it's all elm-code one can reuse variables, call functions, import styles from somewhere etc
[0]: https://package.elm-lang.org/packages/rtfeldman/elm-css/late...