🎄
Q. elm-cssでcss attributeを複数指定したとき何が起きているか
A. わからん
未定義動作的なやつです
解説
ドキュメントには以下のように書かれています
If you give an element multiple css attributes, they will not stack.
が、 実際使ってみるとわかりますがcss attributeを複数使っても意外となんか動きます。謎ですね
動くならいいんじゃない？
内部実装的に
ところでわたしはelm-cssをforkして主に内部実装をきれいにしたelm-origamiというのを作ってそのときに中身を眺めました。
これが実際どう動くかというと
- 複数のcss attributeのうちの一つを選んでstyleタグ内に書き出します（たぶん）
- 複数のcss attributeそれぞれのクラス名を計算して付与します
- 書き出しが一つに対してこちらは全部です。なんで
- 中身が同じなcss attributeは同じスタイル、同じクラス名になるのであるところで書き出されなかったcss attributeも他のところで存在すれば適用されます
こんな感じなはずなんですけど疑似要素とかが入ってくると違ったような気もするししない気もするし実際にやってみると動いてたりでよくわかりません。しょうがないね
書き出し順序について
Q. CSSは上に書いたほうが優先度高いのでcss attributeは上に書いてあるほうが優先されると思うじゃん？
A. 決定論的ではあるがそういう法則ではない
クラス名をキーにしてDictに放り込まれているので順番を期待してはいけません。悲しいね
余談
elm-origamiではここらへんを解決しとこうと思って１年経ちました。悲しいね
もし使ってみたいという方がいればご連絡ください。version upします
他にも将来的にはCascade Layersも使ってみたいなとか思ってます。楽しみだね
Discussion