EDJOなオブジェクトの妄想

ながしまさんのEvery Declaration Just Onceアプローチについてのエントリー2つ( 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ライクな書き方ではないので見た目の気持ち悪さもすごそう。 妄想を書き留めておきたくなるのが数年ごとにあるようなので、今回もそんな感じでイーカゲンに聞き流してくれると嬉しい。