オブジェクト指向CSSの「構造とスキンを分離する」って何？？

HTML・CSS

オブジェクト指向CSS（以下OOCSS）では「構造とスキンを分離する」という言葉を良く見かけます。
最初は具体的にイメージできなかったのですが、おそらくこういう事ではないかと思ったので、調べた事をまとめたいと思います。

サイト制作では、CSSの記述によって更新性などパフォーマンスに違いが出てしまいます。柔軟に対応しようとして細分化しすぎるとインライン指定と似たものになりCSSの役割を活かず、セマンティックにしようとするとCSSが重複しがちです。

【インライン指定のようになってしまった例】
・CSS

.red {
color: #FF0000;
}

・html

<div class="mainArea">
<h2 class="red">タイトル</h2>
</div>

【セマンティックな例】

・CSS

.mainTtl01 {
width: 700px;
margin: 20px 0;
padding: 7px;
font-size: 14px;
background-color:#cc0000;
color: #fff;
}
.mainTtl02 {
width: 700px;
margin: 20px 0;
padding: 7px;
font-size: 14px;
background-color: #fff;
color: #666;
border: 1px solid #3366ff;
}

・html

<div class="mainArea">
<h2 class="mainTtl01">タイトル</h2>
<div>・・・・</div>
<h3 class="mainTtl02">タイトル</h3>
<div>・・・・</div>
</div>

ここで「構造とスキンを分離する」という考え方が重要になります。まず、子孫セレクタは使わないようにします。要素や場所に依存する記述ではCSSを再利用できないからです。

【子孫セレクタの例】
・CSS

.mainArea h2 {
width: 700px;
margin: 20px 0;
padding: 7px;
font-size: 14px;
background-color:#cc0000;
color: #fff;
}
.mainArea h3 {
width: 700px;
margin: 20px 0;
padding: 7px;
font-size: 14px;
background-color: #fff;
color: #666;
border: 1px solid #3366ff;
}

・html

<div class="mainArea">
<h2>タイトル</h2>
<div>・・・・</div>
<h3>タイトル</h3>
<div>・・・・</div>
</div>

場所依存の記述が良くないのと、javascriptの実装やページ内リンクで必要なため、id名はOOCSSの指定では使わないようにします。ベースである構造とそこに追加するスキンのクラス名を作り、プロパティを設定しましょう。 OOCSSのテンプレートではあらかじめ構造部分を.modなどで用意されています。

■Object-Oriented CSS

【OOCSSっぽいと思う記述】
・CSS

.ttlArea {
width: 700px;
margin: 20px 0;
padding: 7px;
}
.txt14 {
font-size: 14px;
}
.mainTtl01 {
background-color:#cc0000;
color: #fff;
}
.mainTtl02 {
background-color: #fff;
color: #666;
border: 1px solid #3366ff;
}

・html

<div class="mainArea">
<h2 class="ttlArea txt14 mainTtl01">タイトル</h2>
<div>・・・・</div>
<h3 class="ttlArea txt14 mainTtl02">タイトル</h3>
<div>・・・・</div>
</div>

タイトル部分のwidthなどベースになるプロパティを構造とし、それ以外の装飾をスキンとしました。スキンのセレクタを他の場所でも利用するため、フォントサイズの指定とそれ以外を分けています。これが適切な設計かどうかはデザインによると思いますので、その辺りの判断が難しいと感じます。

別の場所でもそのまま使えるようにクラス設計を良く考える必要がありますし、制作時の工数が若干増えると思いますが、一度作ってしまえば再利用できるのは便利ですね。

■参考サイト Object-Oriented CSS What's Object-Oriented CSS (japanese)