FlexboxでCSSのグリッドフレームワークの再発明

Published at 2016-03-16

GrdというFlexboxを使ったCSSグリッドフレームワークを使った。Flexboxで実装しているグリッドフレームワークは既にたくさんあるし、何かに困ったからというわけでもなく、 もし自分が実装したらどうなるかなー くらいのノリで作った。

将来的にはdisplay: grid;があったりするけど、多機能な分、使い方が少し複雑である。なので、これはこれで需要があるかもしれないし、ないかもしれない。使い方は1000ch/grdのREADMEを参照のこと。

セレクタの命名規則の経緯（余談）

しばし悩んだが、最終的に-modifierというハイフン1つをプレフィックスにした命名に落ち着いた。modifierと言うだけでBEM感が出るの、どうしようもない。

--modifier

BEMの影響で --で始まるセレクタをmodifierと理解しやすい というのが一番の理由で、開発当初はこれだった。スペック的にはダメだがモダンブラウザ達は--で始まってても一応解釈してくれるので、これでもいいかみたいな。が、カスタムプロパティ周りとバッティングしても微妙かと思い直し、再考し始める。

Class--modifier

BEMの影響で一般的にすらなりつつある(?)、ベースクラスをプレフィックスとしてハイフン2つで繋ぐスタイル。

<div class="Grid Grid--left">
  <div class="Cell Cell--2of12"></div>
  <div class="Cell Cell--2of12"></div>
  <div class="Cell Cell--8of12"></div>
</div>

ベースクラスがどれかを容易に連想できてわかりやすいが、少し冗長かなという。

あとは、Grid--leftやCell--8of12のように単一クラスで成立するようにするアイデアもある。最初はこれは一番シンプルかと思っていたが、共有するスタイルが全てのベースクラスに書かれるので無駄が多い。どちらにも対応可能なように基底となるルール群は:rootにルールを切り出して、postcss-applyで変換するようにしている。

CSS @apply Ruleが現実味を帯びれば、PostCSSナシで出来るようになってとても良い。もし帯びれば、の話だが。

modifier

グリッド上のセルを右寄せにする--rightというmodifierがあるが、これをrightと書くのは流石に攻め過ぎかなと自重した。あるいはpull-rightのようにルールセットの意図をより表現するセレクタにする案もあるが、冗長になりそう+綺麗な命名が浮かばなかったのでボツになった。

__modifier

BEMの影響で要素感が凄くてボツになった。スペック的にも問題ないし、エディタ上でダブルクリックして選択できるし、案外良い気がしているが。

-modifier

modifierぽさが無くなっている気もするけど、これは個人の感想というかBEMの認知度に左右される話だし、プロジェクトのクラスと上書きし合う可能性も低いはずだし、出たアイデアの中で違和感が最も少なかったのでこれに着地した。