【CSS】自分が余白のための空タグ容認派になった理由
以前は余白のための空タグはナシだったのですが最近は容認派に変わってきました。何故そのような変節を経たのか書きます。
余白用の空タグ容認派になった理由
以前は「余白用のためだけの空タグなんて！」と否定派ではあったのですが、最近は心境に変化がありました。1つはコンポーネントの限界という設計とCSSの仕様上の問題、1つはデザインの意図と実装のズレの差を埋めたいという思い、そして、余白に限らずなんだかんだで装飾用の空タグは使っている現実、この3つがあって空タグ容認派になりました。
余白とCSS設計
BEMを始めとするCSS設計においては、コンポーネント志向的アプローチで要素を分け、CSSの影響をコンポーネント内に閉じるようにし、再利用性を上げることを是としています。CSS設計がないと同じスタイリングがいくつも出てきたり、他のスタイルに依存した書き方が出てきたりとカオスになりがちなので、CSS設計はコード品質を保つ上で重要です。
CSSの影響を閉じるという制約上、他の要素のレイアウトに影響を与えるmarginはご法度です。コンポーネント間の余白はより上位レイヤーのコンポーネントによる指定かpaddingで自身の内側とする、ユーティリティクラスの併用などコンポーネント分けとは別の手法が必要になります。
コンポーネントの限界
ReactやVueといったトレンドのフロントエンド技術はコンポーネント志向が強いです。昨今のデザインシステムもこれら技術と相性がよく、デザインとコードの一貫性を生み出せます。一方で全てのWebデザインがそのようなデザインシステムで作られるものでもなく、デザインの軸がシステマチックな一貫性よりもクリエティブに寄る場合もあります。
コンポーネント志向のCSS設計は実装上は有用なものの、デザインは必ずしもそのような手法を前提としているとも限らず、CSS設計とデザインの意図にズレが生じてしまいます。特に余白の考え方がデザインとCSSで違うので、たとえコンポーネント志向なデザインでも如何ともしがたいズレがあると思っています。CSS設計はCSS実装における銀の弾丸にはなりえないです。
余白の考え方の違い
余白は要素間の関係性によって決まってくるものです。見出しと本文、セクションとセクション、といった関係性です。そして余白は余白として独立した大きさを持ったものだと思います。他方、CSSの余白はmarginで取るにせよpaddingで取るにせよ、いずれかの要素に従属させる、つまり見出しが本文との余白を決めたり、下のセクションが上のセクションとの余白を決めたりといったふうに紐づけを行わなくてはなりません。ここに余白に対するデザインと実装上の違いが生まれます。
デザインの意図と実装のはあっていた方が幸せ
一方でデザインの意図と実装は合っている方が何か都合がいいです。セマンティックなマークアップを心がける、とは別にタグの包含関係を合わせる感じです。雰囲気としてはFigmaなどのツールのグルーピング関係と<div>タグの包含関係が一致しているような感じです。他にも横並びならflexを、marginとpaddingの使い分けなどデザインのレイアウト意図とレイアウト実装方法を合わせます。
経験則的ですが、デザイン意図と実装があっている方が多少のデザイン変更にも強く、レスポンシブな挙動にも変な崩れなどが少なくできる堅い実装と思います。
個人的にはCSSにおける余白の考え方からくる実装とデザインの意図のズレが、ウィークポイントになることを懸念しています。
なんだかんだで空タグを使っている
ちょっとこだわったアニメーションを作ろうとすると、装飾専用の要素を用意してそれに対してCSSやJavaScriptから動かす、ということが必要になる場面があります。例えば、テキスト下線をJavaScriptで少しこだわったアニメーションさせる、となると疑似要素などでは難しく、<span>タグで用意する必要があります。
装飾のために空の<span>タグを使うのなら余白のための空タグを使ってもいいんじゃないかと思ってきました。
実装シーンを優先するようになった
結局のところ、自分の空タグ容認への変節は、HTMLの教義的キレイさよりも実装現場における諸問題への対処を優先するようになったんだと思います。それは自分がプロジェクトの工程管理だったり品質管理だったりといった、マネジメント的立場に変わっていったからというのもあります。だからこそ、より手堅く効率的にできるであろう余白のための空タグを容認するようになったのです。
実は空タグを使わずともラッパーを用いる[1]ことで代替できますが、そこまでするなら空タグを用いたほうが明瞭じゃないか、と思うわけです。
それと同時にこのあたりがHTML/CSSの限界というかWebデザインを実装する上での不便な点だと感じています。ネイティブアプリは全然分からないのですが、アプリデザインの実装における、余白はどのようにとるのか少し気になります。
さいごに自分がとった空タグへの意識アンケートを掲載します。
投票総数147なので業界を表すものではないですが、依然として余白のための空タグは否定的な立場が多いようです。容認派になったとはいえ、実際の案件で余白のための空タグを導入したことはありません。実際に導入するかは今後の業界の流れやプロジェクトメンバーの意向次第で決めようと思います。
余白のための空タグ、みなさんはどうでしょう？
-
要素AとBの間に高さ
100pxの余白を空けたい場合に、空タグを設置する代わりに要素Aを<div>タグなどで囲って、そこにpadding-bottom: 100pxを指定することで代替できます。クラス名を用いても可能。 ↩︎
Discussion
私自身は装飾の為の空要素は容認で余白の為の空要素は否定派ですが、世界で40％以上のサイトで使われているWordPressにはスペーサーという余白の為の空要素を追加できる機能が標準でついています。
当然ですがアクセシビリティのためにaria-hiddenも付いています。
それだけ需要があることなんだと思います。
hr 要素を使うとよいのかもしれません。