OOCSS（オブジェクト指向CSS）のすゝめ

2017-04-25CSS

この記事は最終更新日から1年以上が経過しています。

序文

カスケーディングスタイルシートというものはHTMLの領域ともjavascriptとの領域とも違う独自の文化があります。
レビューも困難を極めているのではないでしょうか。
コードレビューはできてもCSSはよくわからない・・・という人も多いと思います。
そこで私がよく使っている(た)CSSデザインパターンの一つを例示したいと思います。

ダメな例

前述のとおりCSSはコーディングでもスクリプトでもマークアップでもなく
ちょうどパワポやVBの要素一つ一つの属性を1つのテキストに羅列したものという感じがわかりやすいでしょうか。
いっしょくたにまとめるべき情報ではありません。カプセル化されているべきです。
なのでポリシーを持たない人が書くとすぐにめちゃくちゃになってしまいます。

このように。

#header{ width:100%; background:#fff;}

#hedaerinner{ width:960px; margin:0 auto; position:relative; padding:7px 0 3px 0;}

#hedaerinner h1{ width:88px; margin-top:2px;}

#hedaerinner h1 img{ width: 74px;}

#hedaerinner #loglist{ position:absolute; right:0; top:11px; }

#hedaerinner #loglist li{ float:left; margin-right:15px;}

#hedaerinner #loglist li:nth-child(2){ margin-right:0;}

#hedaerinner #loglist li a{ display:block; text-decoration:none;}

#hedaerinner #loglist li a{ font-size:15px; font-weight:bold; text-align:center; padding-top:5px;}

#hedaerinner #loglist li { width:90px; height:34px; background:#f1f1f1;}

/*リンクボタンフォームエリア*/

#linkBtnArea{ width:100%;}

#linkBtnArea li{ text-align:center; width:400px; margin:0 auto; background:#FDD000; }

#linkBtnArea li.noactive{ background:#ccc;}

#linkBtnArea li{ text-align:center; margin-top:20px; }

#linkBtnArea li a{ display:block; font-size:20px; font-weight:bold; padding:20px 0; text-decoration:none; vertical-align: middle; font-family:Century Gothic "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳＰゴシック", "MS PGothic", sans-serif !important;}

#linkBtnArea li:hover{ opacity:0.6;}

#linkBtnArea li.noactive{ opacity:1;}

#linkBtnArea li input:hover{ opacity:0.6; cursor:pointer;}

#linkBtnArea li.noactive input:hover{ opacity:1;}

なにがダメかというと
・構造と要素の分離ができていない
・にも関わらず同じ要素指定が複数書いてあったり重複してたりしてメンテナンスのことをまったく考えていない
・無駄なセレクタ指定が多すぎる(影響範囲を考慮していない)
・省略記法と詳細な書き方を混ぜて書いていて、数字の扱い方も雑(マジックナンバー)なんで変更しようとしても思う通りに変更できない可能性が高い、というかそんなことが何度もあった。
・ID指定は使うなといってもちっともきいてくれない
・誤字脱字を指摘してもぜんぜんなおしてくれない

と一部分をかいつまんでも大量にでてくるのですが、
これと同じような調子で数十個のcssファイルに数千行書かれているのですから
いくら書いても書ききれないといった様相で。

CSSに設計思想をもちこむ

CSSのデザインパターンはいくつかありますが長期運用の観点からOOCSSがおすすめです。

・基本的な構造化を覚えるだけでOK
・(ハイフンふたつの場合は、などの)記号の意味を覚えなくてもよい
・オブジェクト指向をベースに思考できる
・世の中のだいたいのパターンは同じ思考パターンをベースに考えられるため基礎として最適

ほかにもSMACSS、BEM(MindBEMding)、SuitCSS、FLOCSSといったものが見つかりますが
どれも根本的には同じで、構造化してシンプルに保つことが目的です。
私の場合はエンタープライズ要求で(キャンペーンページや階層の浅いWebサイトでない)
複数人数で改修が発生する場合、記法ルールがわかりやすいほうがよりよいと判断しました。

採用しなかったパターンですが、例えばBEMのようなシングルクラスでスタイル指定を
する(クラス指定を一つだけ書く)パターンは上述した短期的なキャンペーンページのように
絵コンテを書いてそのままHTMLを作成するというような小規模なWebページの場合はちょうどいいと思います。
しかし、ワイヤフレームを作ってトンマナを合わせないといけないような
ECショップや動的要素の強いサイトを作成する場合、コンポーネントの
増加にともなってマルチなクラスになってくる傾向が強くシングルクラスでは
向かないのではないか、と判断しました。

他にもSMACSSはディレクトリ構成や構造化が細分化されており
より堅牢で理想的な感じですが正直デザイナーエンジニア含めて
全員ができるとは思えません。こういった設計思想(フローではなくルールに近い)は
誰かひとりでも及第点に達していない場合、構造が壊れていってしまいます。

OOCSS(オブジェクト指向CSS)

OOCSSのやり方です。
上述の通りOOCSSの目的は構造とスキンを分離し複数の定義を組み合わせて使用するということです。
そのためには我々の設計手法と同じアプローチで、クラス設計が重要です。

1.設計

数年前に書いたメモです。

これを元に作っていきます。

2.構造化

まず、.lineというインライン要素に.unitという箱があります。
こんな感じでしょうか
・じぇいど

.line

.unit ゆにっと

.unit うにっと

・じっこうけっか

縦に並んでいます

CSSにてレイアウトを作ります
・すたいらす

.line

width: 100%

.unit

float: left

・じっこうけっか

横にならびました。
これで構造化は終了です

3.スキン

.modというスキン(見た目)の指定でredとかblueとか書いてあるので
色をつけられるようにします。
・じぇいど

.line

.unit.mod-red ゆにっと

.unit ゆにっと

.unit.mod-blue うにっと

・すたいらす

.mod-red

color: #f00

.mod-blue

color: #0f0

・じっこうけっか

いろがつきました

あまりにも簡単な例でしたが手順としてはこんな感じです。
仕様変更などが起こった場合、例えば色を変えたいとなったらスキンを追加し変更すれば完了ですし
段組みを変えたい、となった場合はスキン(トンマナ)はそのままでレイアウトを作れば完了です。
イミュータブルにIDを追加していく必要はありませんはずです。