This can also probably be achieved with CSS variables, but it’s less direct and also wouldn’t have enforced styling/data references.
Other examples could be interface elements that represent past user interactions (such as toggle buttons), or for when you need to indicate a state that isn’t basic focus/hover/etc stuff.
I’m not sure I understand what this means. My workflow is, I guess, working within 1 context at a time. Whether that’s as small as an icon or as large as the app.
Maybe some confusion. I do keep my Elm and CSS separate. The css-in-elm is a nice helper/syntactic sugar for Html.Attributes.class "my class".
Turns out that wasn’t very difficult. I’ve actually just released an MVP: Orasund/elm-html-style.
It currently has shorthands for every CSS attribute, with variants for constants and for both px and rem.
The tricky bit was actually to parse their BNF-like Notation. I currently only extract from it what I need and throw away the rest. But this definitely has a lot of potential. For now, I will test this version a bit. See if there are any low-hanging fruits left. And then slowly add features as I require them. But I will probably not go down the elm-CSS route.
I think actually having a strongly typed API would be the hard part. I mean, it should be easy to just translate the BNF into a Custom Type. But one would also need to actually find fitting names for everything and design an API that is useful in practice. This might break an automated solution. (at least that’s my feeling after spending less than 8h on that task)
It is currently setup to fail graceful whenever it encounters something unknown. I then get a report of what went wrong and why. I could see a version where you could assist the generator to handle all edge-cases manually.
@wolfadex The way I’ve generally worked (for companies) is to create a design-system first, often creating layouts/styles that live as plain HTML/CSS components. These are then used for templating (with whatever backend/frontend programming language).
I understand that’s not for everyone and gives “multiple sources of truth” with different files/formats to manage. But quite good for teams.
Oh right, I see. So it’s just translating into class strings. Nice.
I’ve just noticed sometimes I have to do a hard refresh of my browser’s history as the html gets cached. Probably not Elm-specific but a bit annoying. You can disable the cache in developer tools, but if you’re pushing changes in production it’s a problem.
