\
**Category:** Show and Tell\
**Created:** [February 13, 2024, 8:53pm UTC](https://discourse.elm-lang.org/t/an-argument-for-elm-html/9656 "2024-02-13T20:53:44Z")\
**Posts on this page:** 8\
**Page:** 2
**Author:**  [@dzuk](https://discourse.elm-lang.org/u/dzuk)\
**Post date:** [February 16, 2024, 10:09pm UTC](https://discourse.elm-lang.org/t/an-argument-for-elm-html/9656/21 "2024-02-16T22:09:02Z")
> [@badlydrawnrob](#):
>
> Do you have any examples of this?
One example is user colour themes in an application. [I made an Elm application that lets people create and edit Hundred Rabbits themes](https://github.com/dzuk-mutant/100r-theme-editor/) and it uses TEA and elm-css to immediately reflect the user’s theme imports and colour mixing decisions in the interface.
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.
---
**Author:**  [@wolfadex](https://discourse.elm-lang.org/u/wolfadex)\
**Post date:** [February 17, 2024, 3:49am UTC](https://discourse.elm-lang.org/t/an-argument-for-elm-html/9656/22 "2024-02-17T03:49:01Z")
> [@badlydrawnrob](#):
>
> I’d do a `design->layout->template` workflow,
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.
> [@badlydrawnrob](#):
>
> I feel like I’d be leaning towards keeping my Elm code lean and CSS separate
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"`.
> [@badlydrawnrob](#):
>
> One thing I’ve noticed though is the HTML/JS is sometimes getting cached
I’m not sure about what’s getting cached.
---
**Author:**  [@Lucas\_Payr](https://discourse.elm-lang.org/u/Lucas_Payr)\
**Post date:** [February 17, 2024, 1:03pm UTC](https://discourse.elm-lang.org/t/an-argument-for-elm-html/9656/23 "2024-02-17T13:03:20Z")
> [@Lucas\_Payr](#):
>
> I have a crazy idea: Generate the functions for you.
Turns out that wasn’t very difficult. I’ve actually just released an MVP: [Orasund/elm-html-style](https://package.elm-lang.org/packages/Orasund/elm-html-style/latest).
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](https://developer.mozilla.org/en-US/docs/Web/CSS/Value_definition_syntax). 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.
> [@dzuk](#):
>
> I’m not sure if that would be feasible. CSS is not a strongly typed language, so there are a lot of things that have to have oversight and be redesigned so that they work as type checked things in Elm.
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.
---
**Author:**  [@badlydrawnrob](https://discourse.elm-lang.org/u/badlydrawnrob)\
**Post date:** [February 18, 2024, 5:09pm UTC](https://discourse.elm-lang.org/t/an-argument-for-elm-html/9656/24 "2024-02-18T17:09:26Z")
@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.
> [@wolfadex](#):
>
> 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"`.
Oh right, I see. So it’s just translating into class strings. Nice.
> [@wolfadex](#):
>
> I’m not sure about what’s getting cached.
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](https://nicholasbering.ca/tools/2016/10/09/devtools-disable-caching/), but if you’re pushing changes in production it’s a problem.
I’ve had to version css files in the past to [force the users browser to reload any updates](https://stackoverflow.com/questions/11474345/force-browser-to-refresh-css-javascript-etc#:~:text=Anytime%20you%20make%20changes%20to,will%20get%20the%20latest%20version.). Not sure how you do this with the actual HTML file however.
---
**Author:**  [@wolfadex](https://discourse.elm-lang.org/u/wolfadex)\
**Post date:** [February 18, 2024, 6:31pm UTC](https://discourse.elm-lang.org/t/an-argument-for-elm-html/9656/25 "2024-02-18T18:31:43Z")
> [@badlydrawnrob](#):
>
> I’ve just noticed sometimes I have to do a hard refresh of my browser’s history as the html gets cached.
Ah! I do hit this during development as well sometimes. I often find that I work with the dev tools open and caching disabled
and then use versioning/cache busting in production. This can help with a lot of cache related issues during development.
---
**Author:**  [@badlydrawnrob](https://discourse.elm-lang.org/u/badlydrawnrob)\
**Post date:** [February 18, 2024, 8:10pm UTC](https://discourse.elm-lang.org/t/an-argument-for-elm-html/9656/26 "2024-02-18T20:10:17Z")
@wolfadex Yeah that seems the best option for development, and I understand versioning for the CSS/JS files.
How might you do cache-busting in general (if the browser caches the html file?) — via the server header?
---
**Author:**  [@wolfadex](https://discourse.elm-lang.org/u/wolfadex)\
**Post date:** [February 18, 2024, 9:15pm UTC](https://discourse.elm-lang.org/t/an-argument-for-elm-html/9656/27 "2024-02-18T21:15:14Z")
I think the header should be enough. It’s honestly been a while since I’ve had to consider that type of thing.
---
**Author:**  [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [February 28, 2024, 9:15pm UTC](https://discourse.elm-lang.org/t/an-argument-for-elm-html/9656/28 "2024-02-28T21:15:37Z")
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
[Previous page](https://discourse.elm-lang.org/t/an-argument-for-elm-html/9656.md?page=1)