[OOCSS] コンポーネントに拡張性を持たせる

[manabuyasuda]

コンポーネントに拡張性を持たせる

コンポーネントは2つの原則に限らず、機能ごとに拡張できるようにします。OOCSSではmediaオブジェクトが例として示されます。

mediaオブジェクトは以下のようにマークアップされ、画像とテキストが横並びになるレイアウトのことを言います。頻繁に利用されるレイアウトで、TwitterやFacebookのタイムライン、コメント欄や関連記事のようなコンポーネントにも使われることが多いです。

<div class="media">
  <div class="media-image">
    <img src="#">
  </div>
  <div class="media-body">
    <p></p>
  </div>
</div>

CSSは以下のようになります。

.media {
  display: block;
}

.media:after {
  content: "";
  display: block;
  clear: both;
}

.media-image {
  float: left;
  margin-right: 1em;
}

.media-body {
  /* テキストが画像に回り込まないように */
  overflow: hidden;
}

通常のmediaオブジェクトは画像が左でテキストが右と固定されています。画像を右側に配置したい場合もデザイン上よくあるので、バリエーションを作ってみます。ただし、現状のmediaオブジェクトを拡張するようにします。

.media-reverse > .media-image {
  float: right; /* leftからrightに上書き */
  margin-right: 0; /* 右側の余白をリセット */
  margin-left: 1em; /* 余白を左側に追加 */
}

マークアップは以下のように.media-reverseを追加で指定するだけです。

<div class="media　media-reverse">
  <div class="media-image">
    <img src="#">
  </div>
  <div class="media-body">
    <p></p>
  </div>
</div>

.media-reverseというクラスを指定したmediaオブジェクトの画像は右側に配置されます。ベースになるmediaオブジェクト自体のスタイルは変更せず、スタイルを一部だけ上書き・追加しているだけなので、.media-reverseが持つスタイルは必要最低限です。

このようにOOCSSの2つの原則（構造と見た目の分離とコンテナとコンテンツの分離）に当てはまらない場合でも、拡張性を持たせていくことが重要になります。