親が子の padding を決定するタイプの装飾
例えばサービス紹介ページ(所謂 LP)では「背景色は横いっぱいに伸びているが、その内部の左右の余白が一定」な行セクションが連なる UI をよく見る(実際は余白ではなく幅が一定なケースが多いが、余白ということにしておこう)。
この装飾方法はどうあるべきか?
親に左右の padding を設ける
親に padding を設けてしまうと内部の背景色が伸びないのでこれは適さない
各行相当の要素側で padding を一律指定する
お手軽ではあるし多くの場合この形で表現されている気がする
他の子要素が設けている padding と一致していることを暗に前提としてしまっているという問題はある
padding のスタイルや数値等を変数化すれば一旦解決とみなせそうだが、この子要素はこの親要素のもとでしか使用されないという制約を持つことにはなる。LP の例ではそれで十分そうではあるが、一般に許容できるとは言えなそう
親の装飾で、直下要素に padding があたるようにする
> * { padding: .. } といったスタイルを親に設けるということ
デザインされた時点での思想は大抵「この親要素(= このレイアウト)のもとでは子要素の余白は一定である」ということであって、つまり親が子の padding を決定していると捉えるのが自然そうではある。この方針はそれを素直に表現しているという意味でしっくりくる。
ただ、子要素が子を持つこと(padding が意味を持つこと)を前提とし、親がそれを知っていることとなる。
CSS レイヤで緩くその依存が表現されていることに脆さを感じる
子要素は子を持つことを前提とされはするが、親要素の存在を意識せずに済み、別の親要素のもとで使用されることも可能となる
この前提が普遍的とみなせるのであれば、全然良いのかもしれない
子要素のラッパー要素を設け、それに余白をもたせることとし、子要素達をこれで囲う
子要素が子を持つこと等の制約が生まれずに済み、親は子要素がなんであるかを知らずに済む
親としては子要素がラッパーに包まれていることを前提とするが、ラッパーの適用は親要素の一部とみなせるので問題無い
(例えば React の場合)Children.map で子コンポーネントを自動でラップさせることもできる
のだが、コンポーネントと HTML 要素が対応づいているとは限らず(複数要素を持つ fragment 等)、不都合が生まれがち感
子要素の外側の要素のスタイルを自由に外から渡せるようにする
お手軽
渡すスタイルは変数化し、親に帰属するものとする
子の要素構成を親が知っている必要がある
不要に子の自由度が高まる
今回の例でいえば padding だけに限定すればマシと言える
一般に、スタイルの中でも特に余白部分は親要素に帰属させてラッパー要素を捻出することを引き出しに入れておきたいと思った(当たり前のこと?)。子要素の入力(React の Props)で自由度を高めるよりは初手ノーリグレットで選びやすい選択肢に思われる。
個人的には Chakra UI 等で注目している要素に完結した装飾を行うことが多くなったことで意識からやや遠のいたアプローチに感じる。