EDJOなオブジェクトの妄想

公開日

2015-01-24

タグ

CSS

ながしまさんの Every Declaration Just Once アプローチについてのエントリー２つ（Every Declaration Just Once の例とOOCSS の欠点と Every Declaration Just Once のもたらすもの）を興味深く読んだ。

僕もかねてから、CSS プリプロセッサーは CSS を複雑にするだけして何も楽にならないのではないかと思っていた。変数や mixin は出力されるスタイル宣言郡を型のようなものに設定づけ、再利用が可能な便利なものにしてくれる。しかし書式の限られたスタイル宣言郡を使い回すのは柔軟と言えるだろうか。

僕がかつて見殺しにした CSSは、無限に続く断続的な変更になんとかついていこうとした結果死んだ。現実の CSS のメンテはそういった型の中では収まらないレベルの変更ばかりだと思っている。少しでも違うスタイルが発生したら include した宣言ブロック内で mixin に入っているスタイルを上書きするのは賢くないし、かと言ってその都度新しいコンポーネントやそれを mixin 化したものを作るのは、既存のパーツを壊さないにしても、メンテナンス性があるとはお世辞にも言えない。それをしていくと出来上がるのは「創業以来継ぎ足してきた秘伝の CSS」であり、次世代への負債でしかない。それをリファクタリングしていく時間がとれるならナシではないのだけど。

そもそもの宣言ブロックの粒度が小さければそういった問題も起こりにくい。その極限を Every Declaration Just Once アプローチという手法が示してくれた。おそらくこういう書き方を素でやっていた人はいるだろう。それに名前がついただけかもしれない。CSS 設計に注目が集まっていた近年、回帰したとも言えるこの手法に名前がついたことは大きい。

ふとした妄想

EDJO がグルーピングセレクタに対して単一のスタイル宣言が指定されるなら、書き方としては逆もできそうな気がする。例えばこんなフォーマットはどうか。

{
  "font-family": {
    "monospace": ["pre", "code", "kbd", "xmp", ".aa"],
    "sanserif": [".content"],
    "serif": [".mainHeading", "sideHeading"]
  },
  "margin": {
    "top": {
      "10px": [".box", ".icon", "#side", ".sideHeading"],
      "30px": [".mainHeading", ".social", "footer"]
    },
    "bottom": {
      "10px": [".box", ".social"],
      "10px!important": [".icon"]
    }
  }
}

プロパティがキーで、値に配列でセレクタが入っているオブジェクトのようなもの。サブプロパティを持つ場合は入れ子になる。morishitter さんが書いていた CSS プリプロセッサーの placeholder と extend を使った手法だと、それぞれのスタイル宣言をすべて placeholder として別書きで持って置かなければならず、SCSS ファイルがかなり鬱陶しいことになるように思う。ためしに少し書いてみた。たとえば reset.css が EDJO で書かれたら、ちょっと見ていられない感じになる。あれはライブラリのようなものだから EDJO に置き換える必要はないけど。それに対して上記のようなオブジェクトであれば、必要なプロパティの値のところだけにセレクタを書き足すので記述が少なくて済む。仮に EDJO スタイルの CSS コンパイラーが出現するなら、こういうのもありなんではないだろうか。

まぁ、現実そんなものはないし、オブジェクト形式だと変数とか for 文とかどうすんだってなるし、別途処理を書いていくともう JavaScript でオブジェクトを手捏ねしているのと変わらない。あまり CSS ライクな書き方ではないので見た目の気持ち悪さもすごそう。妄想を書き留めておきたくなるのが数年ごとにあるようなので、今回もそんな感じでイーカゲンに聞き流してくれると嬉しい。