CSSにおけるコンポーネント設計 #CSS

前提

cssを書いていくうえで、昨今コンポーネントの重要性が言われているので、コンポーネントについてまとめてみました。

コンポーネントとは

コンポーネントについてまとめるうえで、深掘りすると非常に深く難しい概念なので、ここではcssを書いていく上で最低限知っておくべき範囲でコンポーネントについてまとめます。

関心の分離

コンポーネントには、前提として「関心の分離」という概念があります。例えば、railsにおいてMVCがあるように、htmlではマークアップ構造、cssではスタイリング構造など、特定の役割・機能・振る舞いなどを厳密にわけることを指します。

カプセル化

そして、分離という機能を実現するうえで、「カプセル化」の概念も重要となってきます。カプセル化とは、外部からの影響を許可したもののみに限定し、また内部の変更等による影響を外部に与えないものとでもいっておきましょう。これをcssで当てはめたときに、カプセル化はcssにおいて存在しないことがわかります。cssは、常にグローバルスコープのため、常にお互いに作用しあっています。そのため、cssにおけるコンポーネント化は非常に難しいのですが、OOCSS（オブジェクト指向CSS）というものを使用すると可能となります。

OOCSS

OOCSSとは

構造と見た目の分離
コンテイナーとコンテンツの分離

上記2つを基本概念とする考え方です。
簡単にまとめると、ページ上に存在する、同じような機能やパターンをもつものをコンポーネント（パーツ）ととし、それらを組み合わせていくことで1つのページが完成するという概念。

構造と見た目の分離

例えば、以下の項目のナビゲーションバーがあったとします。

・トップ
・株式会社テストとは
・採用条件
・お問い合わせ

これらをこれまで通りhtmlで書くと以下のようになります。

index.html.erb

<div class="nav_top">トップ</div>
<div class="nav_detail">株式会社テストとは</div>
<div class="nav_employment">採用条件</div>
<div class="nav_contact">お問い合わせ</div>

index.css

.nav_top {
  float: left;
  font-size: 10px;
  padding: 5px;
  color: red;
}

.nav_detail {
  float: left;
  font-size: 10px;
  padding: 5px;
  color: blue;
}

.nav_employment {
  float: left;
  font-size: 10px;
  padding: 5px;
  color: green;
}

.nav_contact {
  float: left;
  font-size: 10px;
  padding: 5px;
  color: yellow;
}

仮に上記のようなhtml、cssファイルがあったとします。
この場合、それぞれコンポーネントとしてはナビゲーションバーのコンテンツということで、実はまとめることができます。また、そのことはコードを見てもわかりますよね。同じようなコードが多数あるので、まとめることができます。それが以下のものです。

index.html.erb

<div class="nav top">トップ</div>
<div class="nav detail">株式会社テストとは</div>
<div class="nav employment">採用条件</div>
<div class="nav contact">お問い合わせ</div>

index.css

.nav {
  float: left;
  font-size: 10px;
  padding: 5px;
}


.top {
  color: red;
}

.detail {
  color: blue;
}

.employment {
  color: green;
}

.contact {
  color: yellow;
}

こうすることで、今後、ナビゲーションバーの修正を加えたい際、navクラスのみ修正すればすべて変更ができます。また、ナビゲーションバーに追加したい際も、<div class="nav histroy">生い立ち</div>のように、最小限の変更で追加することができます。

コンテイナーとコンテンツの分類

htmlではコンテイナーという概念があります。例えば、headerとfooterなど。ここで、仮にheaderとfooterで同じものを使いたい場合、これまで通りやると以下のものとなります。

index.css

#header.test{
  font-size: 10px;
  color: red;
}

#footer.test{
  font-size: 10px;
  color: red;
}

コンテイナーとコンテンツの分類の概念は、htmlの場所に関係なくcssを書くということです。今回の場合だと、headerとfooterで同じcssをあてたいので、わざわざわける必要はなく、以下のようにまとめることが可能です。

index.css

.test {
  font-size: 10px;
  color: red;
}

SMACSS

このOOCSSの考え方をより具体的な構造として構築し、css設計に当てはめた概念にSMACSSというものがあります。
SMACSSについては以下のqiitaにまとめたので、興味のある方はみてください。
http://qiita.com/ftyabu/items/14a45706154c5841d1b7