CSS、レイアウト、現在、未来

floatプロパティーで柔軟なレイアウトを行うことは可能だが、それには熟練と標準化されていない知識が必要になる。Flexible Box Layoutは標準化されていないという問題は解決するが、限られた矩形を基準にレイアウトをすること由来の独特のおまじないという熟練は必要になる(heightプロパティーの工夫)。レイアウトには様々なパターンがあり、Flexboxが解決するのはその一部分でしかない。

問題はFlexboxの能力(とCSSにおける様々な単位の汎用性)が意外に高く、cross sizeが想定されているパターン以外にも流用できることだ。このことはfloatプロパティーが本来フローコンテンツが回り込むように浮かせるものだったのにも拘らず、その汎用性から万能ツールのように扱われてしまったことと似ている。ウェブ開発者たちからもそのもっとすごいやつといった扱いになっていると言って良いだろう。

レイアウトのためのCSSとしては書きやすいことは確かであるし、困ったら標準仕様を参照すれば解決できるという点では問題はない。しかしその前にFlexboxを使うべきレイアウトなのかどうかはしっかりと考えるべきだろう。その上で実装を加味して本来は向いていなそうなレイアウトへFlexboxを利用するなら、ちょうど今floatプロパティーの負債(それよりははるかに少ないが)を返しているのと同じことが将来起きる可能性は高い。


CSSではそういったレイアウト手法をカテゴライズし、それぞれをモジュール化して解決しようとしてきた。Flexboxと同時にいくつか実装も始まっている。その結果はFlexboxの汎用性が圧倒するというもので、理想とは違う形になってしまった。

つまるところウェブ開発者の多くは標準化された万能ツールを求めているだけで、特に論理的なレイアウトの選択肢を求めているわけではなかったようだ。未来はFlexboxの更なる汎用化を仕様へ取り込むか仕様に合わせて他のレイアウト・モジュールの実装が進むかの2つしかないが、どうもfloatプロパティーを考えなしに使ってきた人の多さを考えると前者が優勢となりそうだ。

僕にはそういった万能ツールは思ったように機能しないのではないかと、モバイルOSのレイアウト・システムを見ていると感じる。型通りにやればうまくいくが、ちょっと変わったことをやろうとするとすぐうまくいかなくなる。標準仕様の策定に多くの人が関わる分、まだマシということにはなるかもしれないが、楽観するのは難しい。結局Stack Overflowを検索しないと……というのなら意味がない。


現状ではできるだけ単純化した方法を使うことにしている。floatプロパティーを使うならSassで抽象化してネガティブ・マージンやclearfixの存在を隠してレイアウト・モジュールのように振る舞わせるし、Flexboxを使うならAutoprefixerとコンテナー作りにSassで抽象化することを組み合わせる。そうでないならpositionプロパティーでグリッドを構築し、そのサイズはbottom: 0right: 1.6remなどの相対位置で決定する仕組みを使う。

どれをどう使うかはどちらかというとブラウザーという現実よりもレイアウトの論理的な面から決定する。そうすればその本当に上位互換のレイアウト・モジュールが実装された時にスムーズに移行できると考えるからだ。