社内勉強会用
またしても破綻しがちな z-index の設計を考える。
---
【質問への解答】
Q. Sassのmapでの管理はどうですか?
使用しなくて良いと思います。
理由としては、z-index を map で定義したとしても @each するわけでもなく旨味が無いこと。
`z-index: map.get(global.$stack, header)` のように定義するより変数をベタ書きしたほうが記述量は少ないこと。
変に map 化するよりベタでハイフンつなぎの変数名になってたほうが補完が効くのでありがたいからです。
個人的には @property で継承を false にしたカスタムプロパティの使用を推奨します。
デベロッパーツールでデバッグがやりやすいのに加えて、不意に上書きされたとしても継承を無効にしてダメージを抑えられるためです。
CSS標準の機能なため、プリプロセッサやフレームワークに依存せず移管しやすいのも見逃せないメリットです。
---
Q. 絶対的な z-index はコンポーネントに持たせるべき?
個人的には絶対的な z-index も Pages コンポーネントの Element で管理したほうがいいと思います。
例外を除き、絶対的な z-index は Pages コンポーネントの相対 z-index と捉えることができるため。
加えて、Pages コンポーネントの Element で一元管理したほうが定義が分散しなくてわかりやすいからです。
ただし、従来のCSS設計では絶対的な z-index は Layout レイヤーの持ち物であり、これらは直接呼び出されるのが慣習としてあるのでそれに合わせるかによります。
コンポーネント自体に持たせる例外としてはモーダルウィンドウが挙げられます。
モーダルウィンドウは画面全体をジャックし、かつ背面が inert される関係上、親の Pages とは独立した一つの「ページ」として捉えることができます。
そのため、基本的にモーダルウィンドウは Pages コンポーネントとして扱い、z-index の指定を許容するのが良いでしょう。
※dialog 要素で showModal() する場合はトップレイヤーに配置されるため z-index の指定は不要です。