コード日進月歩

しんくうの技術的な小話、メモ、つれづれ、など

オブジェクト指向CSS(OOCSS)とは何なのかをざっくりまとめる

CSS ざっくりまとめ

提唱元のスライド

OOCSSが提唱された2009年頃のCSS事情

OOCSSが提唱された2009年頃は、再利用性を鑑みたCSSは少なく、ページ単位でCSSを置くことが多い時代でした。またSassなども本格的に流行する前だったため、動的に何かを生成するというようなアプローチも確立されていない頃でした。

当時を知る手がかりとして2009年当時の書籍WebDesigningでのCSS特集のサンプルコードサイトがあります。

Web Designing: 2009年11月号

構造として、登場するDOM要素ごとにCSSが記述されており、 「header.sitewide .util li」というような作りになっていたので、DOM要素とclassの組み合わせで見栄えを決めるということが主流だったことが読み取れます。

OOCSSが解決したかった課題

2009年頃のCSSはパーツごとにCSSを書かなければならない状況であり、資料などを読み解くと以下の問題があったようでした。

  • CSSが表示するDOM要素それぞれにフィットするように個別に作られているので再利用性がない
  • CSSが肥大化しているためWebサイトの表示スピードが遅くなる

そのため、この課題に対して解決する考え方としてOOCSSが提唱したと考えられます。ではOOCSSはどのようなアプローチでこの問題に取り掛かったのでしょうか？

OOCSSの考え方

OOCSSはCSSとそこに関連するHTMLやJSを「CSS Object」と捉えて、Webページ毎につくるものではなく、抽象化して再利用可能なパーツとして考える考え方です。そのため具体的な記述ルールなどがあるわけではなく、CSSやHTMLを設計するための考え方となっています。

再利用性を念頭に置くことで、重複する記述の削除と無駄なコードの削減を狙ったのではないか、と考えられます。そしてこの再利用性を実現するために大きく2つの原則を提唱しています。

OOCSSを構成する2つの原則

原則1. ストラクチャ(構造)とスキンの分離

Webページについて、構成物パーツを形成する「ストラクチャ」と、ストラクチャに対しての見栄えを制御する「スキン」に分けてつくるという考え方です。

例えば、Webページ全体で使う "送信ボタン" , "キャンセルボタン" , "いいねボタン" があったときに、「ボタンストラクチャ」と「送信スキン」「キャンセルスキン」「いいねスキン」というような形式で分離をするというようなアプローチです。

原則2. コンテナとコンテンツを分離する

ここで言う「コンテンツ」は文章や画像などのWebページの構成パーツのことで、「コンテナ」はそれを束ねる要素のことを指しています。その2つを分離するのは、依存関係をなくすということを指しています。

例としてよくあるのはページの先頭の"ページヘッダ"がコンテナとして存在し、フッタ内に配置される"ボタンアイコン" がコンテンツとして存在するときの例です。この"ボタンアイコン"が"ページヘッダ"の特定の場所に配置することを前提としたCSS記述にすると、もし”ページフッタ"で使いたくなったときに見た目の部分は同じ"ボタンアイコン"に関する記述をページフッタ専用で書き直す必要が出てきてしまいます。そのようなことを回避するためにコンテナとコンテンツを分離するべき、というアプローチです。

どう「オブジェクト志向」を取り込んだのか

2009年当時の話でもふれたとおり、CSSの作りが作るページ単位で書き下ろしをし、またサイト内で共通化するということもしづらかった状態が当時あったことかと推察されます。

ではオブジェクト指向のどのあたりを取り込んだのがOOCSSなのでしょうか。提唱者のGitHubを見ると以下のような記述があります。

Basically, a CSS “object” is a repeating visual pattern, that can be abstracted into an independent snippet of HTML, CSS, and possibly JavaScript. That object can then be reused throughout a site. - Home · stubbornella/oocss Wiki

和訳すると以下のようになります。

基本的に、CSSの "Object"とは、繰り返される視覚的なパターンのことで、HTML・CSS・場合によってはJavaScriptのスニペットとして独立した抽象化をすることができる。このObjectは、サイト全体で再利用することができます。

また、上記の CSS Objectの構成要素として以下のような内容も上げています。

A CSS object consists of four things:

  1. HTML, which can be one or more nodes of the DOM,
  2. CSS declarations about the style of those nodes all of which begin with the class name of the wrapper node
  3. Components like background images and sprites required for display, and
  4. JavaScript behaviors, listeners, or methods associated with the object.

This can be confusing because each CSS class is not necessarily an object in its own right, but can be a property of a wrapper class. - FAQ · stubbornella/oocss Wiki

和訳すると以下

CSS Objectは以下の4つから構成される：

  1. HTML、DOMの1つまたは複数のノード。
  2. CSS宣言、これらのノードのスタイルに関するものでラッパー・ノードのクラス名で始まるもの。
  3. コンポーネント、例えば表示に必要な背景画像やスプライトなど。
  4. オブジェクトに関連するJavaScript、ビヘイビア・リスナー・メソッドなど。

各CSSクラスは、それ自体がオブジェクトであるとは限らず、ラッパークラスのプロパティであることもあるので、これは混乱するかもしれません。

このような例示をしているので、OOCSSで提唱したかったものはDOMそのものをふくめたコンポーネントそのもののことを指しているように読み取れます。

スライドでもWebページの構成をレゴで組み立てる話になぞらえて説明をしているので、オブジェクト指向の考え方の構造的な面でのメリットである「部品化」や「再利用性」というところをCSSをライティングする人々の世界に取り込みたかったのかなと考えられます。

参考リンク