CSS in Elm: best practices?

[Duane Johnson]

I built a small app using elm-css to spin the wheels. One of the things I'm looking for is a "compiler's got my back" kind of experience with CSS; however, I found a couple of oversights. I'm curious if there are some best practices that might have given me a better experience:

1. I accidentally used an `id` where a type was meant to be a `class`. When defining types to be used in elm-css, it's a simple type enumeration. Then you define whether it's a CSS id (#) or CSS class (.) I would have expected (somewhat magical thinking, perhaps) that I would not be allowed to put a CSS id in a `class [ myCssId ]`, or a CSS class in a `id myCssClass` context.

2. It appears there is no way to be certain at compile time if the `*.css` file is up to date. I'm using the `elm-live` local development server, and I see no way to guarantee that I'm working with the latest CSS definitions. In other words, my Elm files may be typed and correct, with the compiler reporting no errors, but the browser can show incorrect styles if the css file(s) are not up to date.

Are there any best practices around these issues?

Thanks,

Duane

[Peter Damoc]

Regarding 1. I don't see how the compiler can deduce that a certain union type you used was suppose to have the meaning of ID and another meaning of class 

One way you can do this manually is to specialize the namespace manually and then unpack it. 

namespace : Namespace String Classes Ids msg 

namespace =

    Html.CssHelpers.withNamespace "myApp"

{ id, class, classList } =

    namespace

Regarding 2. You can generate the CSS on the fly and mount it into a style element in the head using ports. This will make sure that you will always have the latest version. 
You can take a look here:
https://github.com/pdamoc/elm-powercss-proposal
to see how that could be done. 

--

There is NO FATE, we are the creators.
blog: http://damoc.ro/

[suttlecommakevin]

I wish CSS was taken more seriously by Elm. 

https://groups.google.com/forum/#!topic/elm-discuss/vvJGw1u7NVQ

[Scott Corgan]

What do you mean by "taken seriously"? (I'm curious).

rtfeldman/elm-css is phenomenal at, at the minimum, giving you type safe styling in Elm. (including pseudo selectors, etc.)

--
You received this message because you are subscribed to the Google Groups "Elm Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[suttlecommakevin]

If you read through that thread you should be able to see what I mean.

IMO, if it was taken seriously, it would be supported as a first class citizen.

[Scott Corgan]

Perhaps. But as is the case with almost all of Elm, features are tested in userland before they become considered for core. (specifically to find the most rational API)

[Peter Damoc]

On Mon, Sep 26, 2016 at 6:34 PM, suttlecommakevin <suttleco...@gmail.com> wrote:

If you read through that thread you should be able to see what I mean.

IMO, if it was taken seriously, it would be supported as a first class citizen.

I've read through the thread and it is not obvious what should change in order for you to be able to call it "first class citizen".

CSS is a very complex topic/issue and elm-css is already doing the best it can be done in the field of direct porting of features found in CSS and the CSS preprocessors. 

If you want things to be different you need to come up with a compelling alternative that demonstrates how, if using your proposed solution, things will be considerably better.

As someone who attempted an elm-css alternative, I can tell you that you need to think at least as hard as Richard did about elm-css otherwise you will gradually begin to understand why elm-css is implemented the way it is.
Some of the implementation details are not obvious at the first look, nor at the second but they start to make a lot of sense when you try to come with an alternative solution. :)