はじめに

谷拓樹さんのWEB制作者のためのCSS設計の教科書を読み、自分なりにまとめたものです。
自分のメモとして残しておきたいので、詳細を多少端折っていますので、気になる方は購入してみてください。

数回に分けて投稿する予定です。

前章の記事はこちらから

コンポーネントとは

コンポーネントとはもともと、ソフトウェア工学やその他の工学分野で扱われている用語である。
簡単に説明をすると、機能や振る舞いなどを明確に分離するということ。
JavascriptやRailsでお馴染みの、Model(データ)、View(見た目)の分離や、HTMLとCSSのスタイリングの分離も広い意味で捉えればその一つである。

分離を実現させるには、カプセル化が重要である。カプセル化とは、コンポーネントの構造やデータなどを隠し、外部からは許可された操作のみを受け付け、また内部の仕様変更が外部に影響しないようにするといったことである。
しかし、残念ながらCSSにはカプセル化の概念がなく、容易にスタイルが予想外に他の要素に影響してしまうことは多々ある。

例えば、ID及びIDセレクタを用いたルールセットは、強固な詳細度によってルールが上書きしづらくなっている点で、カプセル化を実現しているようにみえるかもしれない。

#news {
  border: 1px solid #489;
  padding: 10px;
}

#news  .title{
  border-left: 5px solid #489;
  padding: 10px;
  font-size: 18px;
  font-weight: bold;
  color: #489;
}

.title {
  color: #FFF; # #news .titleよりも詳細度が低いため上書きされない
}

.title {
  color: #FFF;
  background-color: #489; # #news ".title" が"background-color"を持っていないため適用される。
}

CSSでは、おのおのの意図で書いたルールがこのように汚染を発生させることがよく起きる。

OOCSS

オブジェクト思考プログラミングの概念をCSSではに取り入れたもの。多くのCSS設計のアイデアの基礎となる。
OOCSS（Object Oriented CSS）

OOCSS
http://www.slideshare.net/stubbornella/object-oriented-css

元・米YAHOO!のデベロッパーである、ニコール・サリバン氏が提唱

ページ内に存在する同じような機能で繰り返えされるものがパターンであり、これがコンポーネントという部品になる。
ブロック玩具を組み合わせて車や城を創るように、部品を組み合わせてページを作り上げる。

OOCSSの原則

構造と見た目の分離
基本構造と、具体的なルールを分離するということ。

test.html

<div class=“success-message”>成功のアラートメッセージ</div>
<div class=“warning-message”>警告のアラートメッセージ</div>
<div class=“error-message”>エラーのアラートメッセージ</div>

test.css

.success-message {
  border: 2px solid #494;
  border-radius: 6px;
  padding: 10px;
  ……..
  background-color: reba(68, 153, 68, 0.3);
}

.warning-message {
  border: 2px solid #494;
  border-radius: 6px;
  padding: 10px;
  ……..
  background-color: reba(221, 221, 0, 0.3)
}

.error-message {
  border: 2px solid #494;
  border-radius: 6px;
  padding: 10px;
  ……..
  background-color: reba(204, 68, 68, 0.3)
}

エラーメッセージとして基本的な体裁・構造というのは変わらない。
そこで、それらだけを別のルールセットとして分離させる事ができる。

renew.css

.alert {
  border: 2px solid #494;
  border-radius: 6px;
  padding: 10px;
  ……..
}

.success {
  ……..
  background-color: reba(68, 153, 68, 0.3);
}

.warning {
  ……..
  background-color: reba(221, 221, 0, 0.3);
}

.error {
  ……..
  background-color: reba(204, 68, 68, 0.3);
}

renew.html

<div class=“alert success”>成功のアラートメッセージ</div>
<div class=“alert warning”>警告のアラートメッセージ</div>
<div class=“alert error”>エラーのアラートメッセージ</div>

alertというオブジェクトをパターン化したことによって、CSSのコードはもとのコードより少なくなった。また、アラートメッセージの基本的なデザイン仕様が変わったとしても、複数の歌唱を修正する必要は無くなる。また、例えば、infoのようなものが増えたとしても、追加するルールはわずかになる。

exsample.html

<div class=“info success”>インフォメーションのアラートメッセージ</div>

exsample.css

.info {
  ……..
  background-color: reba(68, 136, 153, 0.3);
}

彼らの考えたCSSのベスト・プラクティスに適応したCSSかどうかチェックしてくれるツール。

コンテナーとコンテンツを分離
言い換えると場所に依存しないセレクタを書くということ。この説明は第２章に詳しく記述済み。

test.html

#header .logo {
  display: inline-block;
  width: 200px;
  height: 80px;
}

#footer .logo {
  display: inline-block;
  width: 200px;
  height: 50px;
}

これならば、.logo という部品として単純に定義すればよい。

renew.html

.logo {
  display: inline-block;
  width: 200px;
  height: 50px;
}

フッターに置くロゴは小さなものにしたいとしたら。場所に依存させてしまうよりは、ロゴというオブジェクトを拡張する方が良いかもしれない

renew.html

.small-logo {
  width: 140px;
  height: 56px;
}

renew.html

<div class=“logo small-logo”>CSS設計の教科書</div>