OOCSS(オブジェクト指向CSS)について

質問

恥ずかしながら最近OOCSSというものを知りました。
今までは視覚情報ではなく、スタイルを使用する場所の意味や目的で命名し、htmlソースにやたらクラスを増やさないように作ってきましたが、OOCSSの考え方は真逆だと感じました。

OOCSSはスタイルさえたくさん用意していれば簡単に構築できそうなので、作業効率はいいのかもしれませんが、
htmlソースが乱雑になるような気がして、あまり気が乗りません。

現在の動向としては、どちらが推奨されているのでしょうか？
また、W3Cはこの件に関してどちら持ちかを発表しているのでしょうか？

回答No.3

f1204-okw

OOCSS が人々に推奨されているかどうかに関して，CSS フレームワークの存在が一つの回答になると思います。
私は，CSS フレームワークの存在数が OOCSS（的な考え方）の肯定され具合だと捉えています。

CSS フレームワークとして Twitter Bootstrap のようなユーティリティクラス群や，960gs, Blueprint などのグリッドシステムが有名です。
これらは，たとえば .btn（ボタン）などのあらかじめ定義されたクラスを適用することでデザイナーでなくともそれなりの見た目を作成できるというものです。
すでにご存知かもしれません。

CSS フレームワークではデザインのために HTML を組み，デザインのためのクラス名を当てます。
先のボタンの例で言えば，.btn.btn-small のように視覚を表す語句を使ったり，ドロップダウン式のボタンあることを示すため <span class="caret"></span> という空要素を挟んだりします。
グリッドシステムでは 220px 幅のカラムレイアウトのために .col.span-3 を用います。
このやり方は人々の指摘通り，セマンティクスを失わせる記法です。
しかしこのような CSS フレームワークは数多存在し，実際 多くのフロントエンド開発者たちに重宝されているようです。
文書構造と見た目が分離されていない，旧時代のテーブルレイアウトのような手法がとられているのです。

tkmojo さんが気乗りしないのも非常に共感できますが，一方フレームワークの便利さも感じています。
私は最近 出身のラボのために Web ページを提供したのですが，そのケースではセマンティクスよりも『素人でも保守・変更することができる』ことを重視しフレームワークを用いました。
ページを追加するのは現役のラボメンバー，つまり素人（しかも化学系でプログラミングなどとは無縁）ですから，セマンティックな文書構造は期待できませんし，CSS についても同様です。
<section id="about-lab"> とし CSS 側でがんばってもらうよりも，<div class="col span-3 right"> と書いてもらう方が省力的と考えたのです。

理想的な HTML, CSS ではない手法が人気を博する理由として，理想的な情報構造は高度なスキルを要求するという点も大きいですが，CSS という発展途上な言語も要因にあると考えています。
ユーザエージェント（ブラウザ・デバイス・使用者）に依存しない情報構造を持つ HTML が理想ですが，その理想的な HTML を要求の見た目にするには，CSS はまだまだ力不足と言えます。
つまり，HTML 側に余計な要素を追加して補助してやる必要があるのです。
div#wrapper まみれの非セマンティックな HTML ができあがるのも仕方がない面はあるでしょう。
その現れ方の一つとして OOCSS や CSS フレームワークがあるのだと思います。

情報を構造づけることの難しさ・言語仕様や対応状況の限界から来る手間と，簡単さ・再利用性のトレードオフから OOCSS や CSS フレームワークが肯定されているのだと思います。
私もはじめ否定していましたが，上記のように考えていくうち特に否定することもないと思うようになりました。
Bootstrap くらいうまくまとめてあれば，それほど醜い HTML にはならないと思います。
理想的な HTML, CSS を書くことができる時代が来るまで，OOCSS, CSS フレームワークは選択肢であり続けると考えています。

回答No.2

ORUKA1951

＞ただ、必要もないのにspanを増やしたり…というのはちょっと抵抗がありますね。
　何のために要・不要を判断されますか？デザインをするかしないかで判断されていませんか？---もしそうでしたら、その頭を切り替えてください。---
　たとえばXMLフォーマットでデータを整理する場合
<auther>
　<name>
　　<firstname>
　　　山田
　　</firstname>
　　<secondname>
　　　太郎
　　</secondname>
　</name>
　<address>
　　<zip>
と言う風に作成しますよね。これをブラウザで見る場合には特に必要なければスタイルシート(XSLT)で出力したときに単に
<address>山田太郎 100-0018 東京都・・・</address>
とするかもしれませんし、

　あるいは、HTMLにおいても
<figure><!-- HTML5の要素/HTML4のときは<div class="figure"> -->
　<h1>富士山の写真</h2>
　<p><img src="" width="" height="" alt=""></p>
　<ul>
　　<li class="Date and Time">2003:08:11 16:45:32</li>
　　<li class="Exposure Time">1/659 sec.</li>
　　<li class="FNumber">f/4.0</li>
　　<li class="message">山中湖から富士山を望む</li>
　</ul>
</figure>
なんて書いておいて、
figure li{display:none;}
figure li.message{display:block;}
とか・・

　HTMLのマークアップは文書構造をマークアップするためのものですから、将来、あるいは他のアプリケーションで再利用するとき、あるいは将来メンテナンスが必要なときなどを考慮して、その要素がどういうものであるかをマークアップすれば良いのです。
コメントを書いても同じですが・・それならより役立つ形で・・・

OOCSSに戻りますが、
body>div.section>strong.important{color:red;}
と書ける方、HTMLやCSSが楽ですね。たとえ今回は色をつけなくても--プレゼンテーションは考えなくても、自身でその部分がstrongの中でも特別重要なのだと理解できるでしょう。

回答No.1

ORUKA1951

W3Cは、ずばり・・・
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
注。 CSSではclass属性が非常に大きな力を持っている。 したがって文書作成者は、体裁に殆ど何の関係も無い要素（HTMLだとDIV要素やSPAN要素など）をベースにして、それらにclass属性でスタイル情報を与えれば、独自の構造化言語を設計できると考えられる。 しかし、文書の構造要素は広く受け入れられている一般的意味を持つ場合が多いので、こういった使用法は避けるべきである。 文書作成者が定めたクラス名では、意味を理解してもらえない場合もある。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［セレクタ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#class-html )］より

　のように否定されています。

・OOCSS（オブジェクト指向CSS）のススメ | hijiriworld Web ( http://hijiriworld.com/web/oocss/ )
のような説明が多いようですね。
　しかし、このサイトでも比較対象がIDの多用を槍玉に挙げているように、とっても悪いですね。他のユーザーエージェント・・・携帯端末とか読み上げソフトとか点字端末は無論、検索エンジンのことなんて理解の範疇にないようです。
　CSS1が公表された当時の相当古い考え方だと思います。

　それは、HTML5のセマンティックなHTMLの考え方を否定するものです。

　別にW3Cの言うことを金科玉条に従う必要はありませんが、W3Cのほうが筋が通っています。

★クラスセレクタ Class selectors ( http://web.okanos.com/css/class-selectors.shtm )
　の説明のほうが参考にするべきでしょうね。

なお、
「htmlソースにやたらクラスを増やさないように作ってきましたが、」
は違いますよ。上記の引用先にもあるように、文書構造を示すにはHTMLの要素は不足しています。そのために「文書に構造を付加するため」にclass名は絶対に必要なのですよ。
・とりあえず必要なくても、あとあと利用する可能性があれば
<dt><span class="Family name">山田</span><span class="name">太郎</span></dt>
のように、class名をつけたりします。それはclassがスタイルシートのためだけではない、第一の目的が「文書構造の補完」だからです。

お礼

詳しくありがとうございます。
OOCSSは、そういうものがあるという知識として認識して
自分では使わず行こうと思います。

> ・とりあえず必要なくても、あとあと利用する可能性があれば
> <dt><span class="Family name">山田</span><span class="name">太郎</span></dt>
> のように、class名をつけたりします。それはclassがスタイルシートのためだけではない、第一の目的が「文書構造の補完」だからです。

これは勉強になりました。
ただ、必要もないのにspanを増やしたり…というのはちょっと抵抗がありますね。