前書き
Elmはウェブアプリケーションを目的としたDSLです
わたしは0.14から触っていて歴史に詳しいわけではありませんが、evancz/elm-graphicsでは
Elm actually started as a small set of visual elements, not a language. That is partly why I chose the name Elm out of all the nice tree names out there.
と言っているので、もとはGraphicsライブラリでした(断言)
Graphics自体は、今は使われておらずHtmlがViewの中心になっていますが
Elmではhtml, js, cssに特にこだわってなくてウェブアプリケーションをいい感じに作れるためになんかいろいろ考えてるみたいです
その中で最近出てきたStyle ElementsはElmの魔法使いことRichard Feldmanも使ってみてる(参考)新しいviewライブラリです
Style Elementsってどんなだ
Element
Elementはレイアウトが組み込まれたHtmlです
通常レイアウトはたくさんのdiv要素とcssで組むと思うんですが、Elementは最初からrow, columnなどの要素を提供します
Style
Styleはレイアウトやサイズ以外のCSSです
Color、Border、Font、Shadowなどです
ElmコードでClassに対してStyleSheetを書いてElement側でClassを指定する感じになります
CSSを低級言語として扱ってStyleとElementって概念に組みなおしたのがStyle Elementsということになります
CSSフレームワークとやってることは変わらないといえば変わらない感じですね
感想
コードは載せずに使ってみてる感想書きます
割と悪めの感想が多いです（だっていい感想ってむっちゃレイアウト組める！簡単！しかないんだもん・・・
チュートリアルとかまた別途かけたらいいんですが
CSS相当のStyleをElm上で書くことになる
全部ひとりで書いているわたしにとっては問題ないんですけど、この時点で採用できないってなりそう
それなりに適切な型付きでStyle書けます
通常のCSSから機械的に変換できない
CSSを型付きで置き換えよう、を目指してないのでそのまま変換はできません
レイアウト、サイズ、ポジション系がないのもあるんですが、Style.Shadow.simpleみたいにちょっと抽象化してるのもあるので
実際、どういうCSSに変換されるかはコード見に行くか動かしてみてみるしかないです
Style.prop使えばどんなプロパティも書けるので一応移植はできるとは思います
生成したCSSは<style>タグにいれられる
実現方法です
生成されたのをみると<style>タグが一緒にできてて、そこに定義したのが入ってます
これみにいってください
https://miyamoen.github.io/skuld/
人によってはやだそう・・・
Class相当のものを一つしか指定できない
通常だとClassにいっぱい指定してレイアウトとかstyleを付けるんですけど、それはできません
代わりにvariationの仕組みがあって el Button [ vary Primary ] <| text "Primary Button"こんな感じでClass一つ(Button)とvariation(Primary)を指定できます
variationは複数かけます
一つしか指定できないというのはStyle Elements上でのClassの話なので普通のClassは普通に書けます
el Button [ class "danger align-left" ] <| text "Button"
CSS Animationはできない
CSS Transitionはいける
あってもいいような気もするし、要らないような気もする・・・
簡単なアニメーションはできる
CSS Transitionと疑似クラスが使えるので行けます
HtmlとCSSの知識は必要
結局変換されるし、ドキュメントが充実してるわけじゃないので別途知識は要求されます
逆に勉強の指標になるので個人的にはうれしかったんですが（Style ElementsでCSSちょっと覚えました
抜け道は用意されている
Style.propでどんなCSSも書けるし、Element.htmlでHtmlを持ってこれる
CSSフレームワークとの共存もできます。生成されるクラス名は.button__2169476993こんな感じになるので衝突は心配ないはず
レイアウトが楽
div付けてclass名指定するのと変わらないじゃんと言われるかもしれないけど、楽
今までcssフレームワークは使ってみたりしたんですけどdiv・・・class・・・うまく配置できない・・・わけわからんってなってたのが解消されました
横に並べたきゃrowで縦に並べたきゃcolumnでspaceとかpaddingいれたきゃattributesに追加するだけだし楽
Spacing ++ Padding
ドキュメントのここら辺
http://package.elm-lang.org/packages/mdgriffith/style-elements/4.2.1/Element-Attributes#spacing
ドキュメントをみればわかると思うんですがCSSでmargin, paddingをどうしようってなってたのに比べてとても簡単
mediaクエリない
ドキュメントに書かれている方法としては
Modelにwindowサイズを含めて、それを使ってview内で分岐することで実現するみたいです
まだやったことないけどそろそろやってみようと思ってます
CSS Grid
対応されてます。NamedGridも対応
まだ使ったことないです。使う予定はあるので使ったらなんか書きます
APIが固まってない
CSSをそのままマッピングすることを目指していなくて（要出典）独自に抽象化しているんですが、まだ決まり切ってない感じを受けます
ヤギ魔法少女 ピュアファンクショナル（さくらちゃん）さんの感想
僕は生CSS書いて自分でフレームワークもどき化ちゃうけど、なんだかんだで全体の設計がStyle elementsに似てくるし、flexboxをレイアウトの基本に使う方針とか筋がいいなぁって感じる
まとめ
デザインは自分でしないで他のデザイナの人がやるって人には使うの無理だろって感じです
個人的な話ですがわたしはデザインとかやりたいので（できないけど）Style Elementsを好んで使えるんだと思います
Elmでやりたいことを考えてください。自分でデザインもやってみたいわたしにはStyle Elementsがはまりましたが、人それぞれ目的は違うと思うので目的にあった選択をするといいと思います
大体CSSフレームワークでいいと思うよ、ほんと