読者です 読者をやめる 読者になる 読者になる

OOCSSとEDJO、もしくはHTMLとCSSにおける命名

OOCSSの欠点とEvery Declaration Just Onceのもたらすもの

hail2uさんのこの記事を読んで、EDJO (Every Declaration Just Once)というCSSの記述アプローチを知ったので、僕なりに考えたことをまとめてみる。

OOCSSとEDJO

OOCSSとEDJOの違いは、 名前を付ける向きだと思う。OOCSSでは、CSSからHTMLに、つまりCSSで定義したルールセットの名前をHTMLで使用するということ。そしてEDJOでは、HTMLからCSSに、HTMLの構造に名前が付き、その名前に当てるスタイルを定義するという流れだ。

デザインの意図やコンポーネントの見た目に対して名前を付けるのがOOCSS的アプローチで、文書構造や文書の意味に対して名前を付けるのがEDJO的アプローチなのかなと思う。

OOCSS的アプローチを取ると、.btn-large.text-centerといった名前になる。そしてHTML側で複数のクラスを組み合わせることでスタイルを当てていく。 そして、EDJO的アプローチを取ると、HTMLのclass属性値等に付けられたmenubtn-nextといった名前に対してプロパティを割り振っていく(プロパティに対して名前をセレクタとして追加していく)。

HTMLとCSSの設計

HTMLとCSSの設計が破綻しやすい原因は、HTMLとCSS間の命名の主従関係が明確でないからではないか。

例えば、あるプログラミング言語とそのライブラリの間では、モジュールの命名の主従関係ははっきりしている。 ライブラリが付けた名前をアプリケーションコードが使用するといった具合に。

しかし、HTMLとCSSでは上記で述べたように、HTML側から名前を付ける場合とCSS側からの場合がある。 このように、双方向から名前を付けることができるから、HTMLとCSSは破綻しやすいのではないか。 そして、このHTMLとCSS間の命名を一方向にするアプローチが、OOCSSとEDJOだと思う。

しかし、これらの一方向のアプローチをとってもまだ完全ではない。 CSSには複数のプロパティを組み合わせることで意味を持つものがあるので、(完全な)EDJO的アプローチが良いとは思えない。 OOCSSの欠点はhail2uさんのブログにも書いているから割愛するが、僕自身もいわゆるマルチクラス設計について思うことはある

ではどうすればいいのか。

僕は、HTML側からもCSS側からも命名をし、HTMLとCSSの間に そのバインディングをおこなう世界 があればいいと思う。 そして、バインディングをおこなう世界の例として、CSSプリプロセッサーのextendが使えるのではないか。

%btn {
  //
}

%btn-large {
  // 
}

%btn-blue {
  //
}

.btn-next {
  @extend %btn;
  @extend %btn-large;
  @extend %btn-blue;
}

このように、CSS側からコンポーネントの見た目から付けられた名前(%btn, %btn-large, %btn-blue)とHTML側から文書の意味から付けられた名前(.btn-next)を@extendを使ってバインディングできる。


ここに書いてあることは僕の妄想なので、正しいかどうかはわからない。 誰かに意見をもらいたいし、議論したい。

あと、そうそう、このextendを安全にできる、YACPっていうプリプロセッサーがあるみたいですよ。