Hi all. I’m still struggling to understand why anyone would want to bundle their CSS within their Elm files — other than adding css classes.
After seeing Richard Feldman’s “Make Data Structures” talk it seems pretty clear that thinking in components (like you might do with TypeScript or Nuxt) in Elm isn’t wise — but that’s how most JS frameworks do it.
I’ve done a lot of work with CSS in the past (often in component style) and it’s often frustrating to work with, but mixing your code logic with styling doesn’t make sense to me — perhaps others could enlighten me!
The two extremes I know of are ECSS and Tailwind. I created my own framework for typography a while back too.
With ECSS your component CSS lives with your component JS — so this mightn’t work well with Elm — I’m new to it so haven’t tried that approach yet. With ECSS you’d add the component classes with HTML.Attributes and I guess use classList where necessary to manage state.
I’m still not 100% comfortable with the way Elm does HTML (it still feels a bit unnatural) but perhaps using Elm Watch and a simple css compiler is all you need. (I generally use .less only for breaking up files into manageable chunks)
So your Html.Style approach looks interesting, but what’s the benefit of using that over plain old CSS?
TL;DR CSS is not, and probably never will be a proper programming language and is full of quirks, so trying to make it so (even with simple compilers like .less) I’ve found to be a mistake.