A newbie question: How do you guys use css in big application? In particular, which one is more suitable out of the two, ie., elm-css and external css nowadays? I found a discussion in google group on this topic. But it was 2016 and had no consensus.
By my experiences in the past, I like seperate concern, ie., externalize CSS from elm program. But I’m open to elm(typed) css(eg., elm-css). The advantages of strong typed programtical CSS is obvious. However that bind css to elm program which is not friendly to web designer. Anyway that’s the feeling of someone new to elm like me. I’d like to hear from words of people who apply either ways in their real big applications.
I use separate CSS. The strongest argument right now is because sometimes we need per deployment customization and it is easier to inject CSS for this use case. Also, sticking to separate CSS allows to share the design with external collaborators that don’t need to know Elm, as you point out.
I use a staticatomic / functional CSS organisation for bigger projects (external css). The benefits are easy scaling and consistency, however designers in your team will have to compose css classes instead of writing their own (which might be a new / different step in the process).
I prefer neither and use elm-ui for all of my work. If I had to use css though I’d probably use elm-css or possibly elm-default-tailwind-modules 1.0.0 as I prefer using something statically typed.
No css and html for a elm programmer?! Elm-ui sounds like too good to be true I’ll definitely try it.
BTW you did mention “If I had to use css though…”, I assume there’re scenarios you have to use css along with elm-ui. Are they just niche ones or inevitable?
Yes elm-ui feels to good to be true, I can not go back to using anything else after learning it… Its like going from Javascript to elm… same feeling… You do not want to go back if you do not have to
You can do most things with pure elm-ui… But sometimes you have to add a few lines of CSS… But that is easy, elm-ui has built-in escape-hatch functions and supports adding in both CSS or html directly if needed. elm-ui has its own properties on the graphical elements, like width, height, Background.color, Border.width ++ and if you need some CSS you would use a function called htmlAttribute that will convert normal htmlAttributes to elm-ui attributes like this:
column
[ width fill
, height fill
, htmlAttribute <| Html.Attributes.style "pointer-events" "none"
]
[ ]
And if you need some html or SVG inside an elm-ui element you would wrap that in the Element.html function: el [ ] ( html <| Html.div [ ] [ ] )
I said “had to use css” because there’s a chance you’re working with others who prefer CSS. That could either be because you’re on a larger team who’s more comfortable with CSS or because you’re converting an existing app to Elm and don’t want to change the look yet. Happy you’re going to test out elm-ui though! I hope you enjoy it.
Oh I see. Glad to know that if I start building a new application(what I’m going to do), I can (nearly)totally rely on a no-css approach. I’m intensively evaluating ELM, basically getting a first-hand experience by myself. Elm-ui seems like a big plus for my decision.
I’ll definitely try it.