Style Elementsに対する感想を書くので気になったら使うといいと思う

http://package.elm-lang.org/packages/mdgriffith/style-elements/latest

# 前書き
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も使ってみてる[(参考)](https://github.com/rtfeldman/style-elements-demo)新しい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をそのままマッピングすることを目指していなくて（要出典）独自に抽象化しているんですが、まだ決まり切ってない感じを受けます

## ヤギ魔法少女 ピュアファンクショナル（さくらちゃん）さんの感想
https://twitter.com/arowM_/status/937531700971675648
> 僕は生CSS書いて自分でフレームワークもどき化ちゃうけど、なんだかんだで全体の設計がStyle elementsに似てくるし、flexboxをレイアウトの基本に使う方針とか筋がいいなぁって感じる

# まとめ
デザインは自分でしないで他のデザイナの人がやるって人には使うの無理だろって感じです
個人的な話ですがわたしはデザインとかやりたいので（できないけど）Style Elementsを好んで使えるんだと思います

Elmでやりたいことを考えてください。自分でデザインもやってみたいわたしにはStyle Elementsがはまりましたが、人それぞれ目的は違うと思うので目的にあった選択をするといいと思います

大体CSSフレームワークでいいと思うよ、ほんと