オブジェクト指向CSS(OOCSS)とSassとUIデザインのベストな関係

オブジェクト指向CSS(OOCSS)とSassとUIデザインのベストな関係こんにちは、マークアップエンヅニアのゆーじろーです。
今回は掲題の通り、オブジェクト指向CSSという概念について書きます。

ちなみに恥ずかしながら私はつい最近までこのOOCSSという概念を知りませんでした。
ただ、私が普段CSSコーディングする際に行っている行為がどうやらこれらしい。というのと、
いくつかドキュメントを探してみたら、概念を誤解しているようなものも散見されたので改めて纏めました。

オブジェクト指向CSS

まず基本のおさらいですがCSSでは主にエレメント、クラス、IDの三種類の要素を使用してスタイルを定義します。

p{color:#ff0000;}   /*エレメント*/
.red{color:#ff0000;}/*クラス*/
#red{color:#ff0000;}/*ID*/

上記はどれも結果として返す値は変わりません。
ですので慣れてきた人であればこう書きます。

p,
.red,
#red{color:#ff0000;}

拡張メタ言語のsassではこのあたりをextendで出来るようになっています。
lessでも同様の実装を進めています。

ちなみに、上のソースの時点でストリクトなCSSを書く方からは反感があります。
CSSは振る舞いを指定する言語ですが、そのIDやクラス名は、その振る舞いに左右されるような名前を推奨していません。
つまり赤だから.redや#redという命名はすべきではありません。

これは正しくも有り間違ってるとも言えます。
例えば次のようなクラスの当て方を見た時CSS原理主義者はどう思うでしょうか。

<ul class="btnArea">
    <li class="btn firefox"></li>
    <li class="btn chrome"></li>
    <li class="btn safari"></li>
</ul>

おそらくこうした方が良いという反応があると思います。

<ul class="browserArea">
    <li class="firefox"></li>
    <li class="chrome"></li>
    <li class="safari"></li>
</ul>

ある意味正しいのですが、ボタンはどちらかというと振る舞いというより機能的な意味合いが強いのと
そのためhtmlを見たときにどこがボタンなのか分かりにくいので間違ってるとも言えます。

上記の例のように、オブジェクト指向CSSとは
「共通なものは共通な物同士でオブジェクトとしてまとめる」と考えることで
作業効率性、メンテナンス性、描画効率の3つを高めようという概念です。

どういうことかというと、次のようなCSSがあったとします。

.btnAction{
  width:200px;
  height:40px;
  border-raidus:4px;
  boder:2px solid #000000;
  text-align:center;
  background-image:url(../img/btn/btnCommonSprite.png);
  background-size:200px;
  background-repeat:no-repeat;
  background-position:0 0 ;
}
.btnBattle{
  width:200px;
  height:40px;
  border-raidus:4px;
  boder:2px solid #000000;
  text-align:center;
  background-image:url(../img/btn/btnCommonSprite.png);
  background-size:200px;
  background-repeat:no-repeat;
  background-position:0 40px ;
}
.btnClear{
  width:200px;
  height:40px;
  border-raidus:4px;
  boder:2px solid #000000;
  text-align:center;
  background-image:url(../img/btn/btnCommonSprite.png);
  background-size:200px;
  background-repeat:no-repeat;
  background-position:0 80px ;
}

なんてことない普通のCSSですがbackground-position以外は共通しているのが分かります。
ですのでOOCSS的なコーディングであれば次のように書きます。

.btn{
  width:200px;
  height:40px;
  border-raidus:4px;
  boder:2px solid #000000;
  text-align:center;
  background-image:url(../img/btn/btnCommonSprite.png);
  background-size:200px;
  background-repeat:no-repeat;
}
.btnAction{
  background-position:0 0 ;
}
.btnBattle{
  background-position:0 40px ;
}
.btnClear{
  background-position:0 80px ;
}

ボタンには全てbtnクラスが入り、更にアクションやバトルなどのクラスが入ります。
このあたりを.width200とか.boderBlackとかスタイルの小項目ごとにクラスを切る場合がありますが、
推奨しません、さすがにそこまで行くとCSSの意味を成しません。そんなに細分化されてるならstyle属性に直で書いてる方がパフォーマンスが上です。
実際にはあくまでもCSSの基本概念(振る舞いに左右される名称をつけない)を守りつつ、どう効率的に書くのか、というのがOOCSSと言えるでしょう。

オブジェクト指向Sass

次にSassではこのように書く事でよりオブジェクト指向っぽい書き方が出来ます。

%baseButton{
  width:200px;
  height:40px;
  border-raidus:4px;
  boder:2px solid #000000;
  text-align:center;
  background-image:url(../img/btn/btnCommonSprite.png);
  background-size:200px;
  background-repeat:no-repeat;
}
.btnAction{
  @extend %baseButton;
  background-position:0 0 ;
}
.btnBattle{
  @extend %baseButton;
  background-position:0 40px ;
}
.btnClear{
  @extend %baseButton;
  background-position:0 80px ;
}

この場合、baseButton単体では意味を成しません、他のクラスではextendしているのが一目で分かります。
この%baseButtonというのはextend専用のプレースホルダセレクタと呼びます。
extendはネストされたクラスなどで行うとセレクタが増長化されてしまいます。
ですがこのように共通するプロパティの集合はプレースホルダセレクタを使用するというルールを
用いる事で増長化や意図しないセレクタのレンダリングを防ぐ事が可能です。
吐き出されるCSSは下記のようになります。

.btnAction,.btnBattle,.btnBattle{
  width:200px;
  height:40px;
  border-raidus:4px;
  boder:2px solid #000000;
  text-align:center;
  background-image:url(../img/btn/btnCommonSprite.png);
  background-size:200px;
  background-repeat:no-repeat;
}
.btnAction{
  background-position:0 0 ;
}
.btnBattle{
  background-position:0 40px ;
}
.btnClear{
  background-position:0 80px ;
}

一番最初に書いたOOCSS流ソースと比べると若干長いですが、htmlのタグに毎回btnと書く事を考えればこちらのほうが正解と言えます。
この場合同じセレクタを二度呼んでいますが、OOCSS流の場合一つ多くセレクタを呼んでいます。
一度読み込んだセレクタがブラウザ側にキャッシュされているのであればOOCSS流は余計な走査を行っている事になります。

UIデザイナーとの連携

UI側にレスポンス速度を求める場合、以上のようなOOCSSを用いるにあたり、必要不可欠なことがUIデザイナーとの連携です。
OOCSS単体でもたしかにレスポンスはよくなりますが、UIデザイナーとの連携を深めることで更にレスポンスを向上できます。
UIデザインにおいてもオブジェクト指向の概念を持つ事で、結果的にユーザーのストレスを減らせます。
Windows8のモダンUIのようなものを作れということではありません。
より効率的な設計を施す事で、リッチであることとレスポンシブルなUIは両立出来ます。
そして多くのデザイナーはパターンとして既に行っていることが多いため、学習コストも低いです。

  1. フレームと背景画像と背景色
    リッチかつレスポンシブルなUI素材にはなるべく共通化された素材が必要です。
    その為に、デザインする際フレームと背景画像、背景色をばらばらに考えて作る必要があります。
    レイヤーは統合しないでください。分離され共通部分のあるパーツは良い構成素材です。
  2. 幅、長さのパターン化
    例えばブログのスキンを作られたことのあるデザイナーさんであればピンと来ると思いますが、あのように大きさなどを
    パターン化することも非常に有効です。
    アプリケーション全体のUXにも関わってくるため、ルールとして纏めてしまうくらいしても良いでしょう。
  3. CSSで出来る事、出来ない事の共有化

    porunarefu
    「ただのグラデーションだと思っていたらレイヤーエフェクトで凄い事になっていた。何を言っているのか分からないと思うが俺も何をされたのか解らなかった…」
    (匿名/フランス在住/男性)

    こういったことはよくあります。エフェクトが適用されてることでCSSで再現しにくい事例です。
    CSS Filter Effectsというのがあるにはありますが、また未実装なブラウザもあり、使えると言えるまでにはあと数年、複雑なエフェクトが使えるにはさらに数年を要すると予想されます。
    ですのでCSSで出来る事、出来ない事の共有化をすることで、こういったCSSで再現しにくいデザインを押さえることは
    パフォーマンスを求める場合有効です。

いかがでしたでしょうか、以上のようにCSSコーディングにオブジェクト指向の考え方を導入し、
UIデザイナーとの連携を深める事が可能になったのであれば、ユーザーはもとより開発者にとってのストレスも軽減するかと思います。
最後までご覧頂きありがとうございました。

One thought on “オブジェクト指向CSS(OOCSS)とSassとUIデザインのベストな関係

  1. Pingback: Pooled the Draft » 今更OOCSSとか

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です