オブジェクト指向CSS(OOCSSとは?)
オブジェクト指向のCSS、、、つまり、CSS側でスタイルを細かく分けて、HTML上で組み合わせてデザインしていく最近見直されてきたCSSの書き方です。
主にCSSテンプレート制作に利用出来ます。
まずは例を見てみましょう。
例) 文字を小さく、かつ右寄せにしたい
<p class="small right">文字を小さく、かつ右寄せにしたいテキスト
<style>
.small {font-size: 80%;}
.right {text-align: right;}
</style>
こんな風にclassを組み合わせるだけで、文字組等出来る様になります。
例) ul.table_list.col2>li*8>aとか使ってみた場合
flexible boxを使ったマルチカラムや、テーブル状のリストを作るスタイルを予め用意すれば、かなりの物を作れます。
/* ================================================
[[table list]]
** 複数行カラムリスト
** ul.table_list.col[num]>li で使う
=================================================== */
ul.table_list {
overflow: hidden;
*zoom: 1;
margin-left: auto;
margin-right: auto;
}
ul.table_list > li {
list-style: none;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ul.table_list.col5 > li {
width: 20%;
}
ul.table_list.col4 > li {
width: 25%;
}
ul.table_list.col3 > li {
width: 33%;
}
ul.table_list.col2 > li {
width: 50%;
}
ul.table_list.col2 > li:nth-child(2n) {
float: right;
}
いくつかのスタイルは省略されてますが、基本的にこんな感じです。
記述するのは基本的なレイアウトのみで、個別のデザインはid/classを追記し、個別のスタイルを当てていくと見やすくなります。
メリット
HTMLだけでUIの作り方を制作する人に指示できる事です。
HTMLの基本しか知らない人でも、組み合わせ次第でいろんなUIが実現出来ます。
こんな感じで簡単な取扱説明書を作れば、使い方を簡単にメンバーへ伝える事が出来ます。
見る側も、CSSと見比べっ子しながら作らないで良いので楽ですね！
デメリット
とまぁメリットだらけに見えるOOCSSには大きなデメリットが2個もあります。
- メンテナンス性が悪くなります。
例えば、通常、liを追加するだけで済む所が、一杯classを追記しなくてはいけなくなったりします。
特にCSSに精通している人にとっては邪魔になる事の方が多いです。 - セマンティックで無いクラスの濫用はそもそもダメ。
要するに、クラス名に内容と直接関係ない名前(例.col2)は付けてはいけないという話です。
国内では対応状況は悪いですが、そのうち標準になるでしょう。
①はよく更新する部分は楽に更新出来る様に別途CSSを組めば大丈夫です。
ただ、マニュアルはその分多くなります。
②はidを付けて管理したり、別途セマンティックなクラスを付ける事でそれらしくする事は出来ます。
ただ完璧では無いです。
まとめ
OOCSSは、
- ○ CSSがよくわからない人でもHTMLの基礎さえ知っていれば複雑なレイアウトを組める
- ○ テンプレートの解説が容易
- ☓ メンテナンスが複雑
- ☓ セマンティックでは無い
という事になります。
HTML+CSS専門家と実際に運用する人のスキルレベルに差がある場合は有用かと思います。
続きます
まだここから先があります。
OOCSSの弱点を潰しつつ、オブジェクト指向で簡単にサイトがレイアウト出来る…
その名もOOSCSSを次回は(いずれ)紹介したいと思います。
