« [.NET] ルビを生成してくれる、 ASP.NET 用 YomiganaServerLabel コントロール ~ International Feature Pack 2.0 Beta | トップページ | [Windows7] 日本でも Windows フィードバック プログラムが始まった »

2009年6月24日 (水)

"Object Oriented CSS" …名前なんて飾りです f(^^;

「object を orient している CSS」 ( CSS が object を orient している ) …って、 私にはまるっきり意味不明ですがw まぁ、 それは置いといて f(^^;

マイコミジャーナル : オブジェクト指向 CSS、 HTML 複雑だがパフォーマンスと再利用性向上
2009/06/22

Kevin Yank 氏が SitePoint に First Look: Object Oriented CSS のタイトルのもと、 オブジェクト指向 CSS (Object Oriented CSS: OOCSS) に関する概要をまとめている。 同文書ではオブジェクト指向 CSS に関しては Yahoo! のエンジニアである Nicole Sullivan 氏が有名であるとし、 Nicole Sullivan 氏の発表資料をとりあげて OOCSS について説明している。

これかな ⇒ Nicole Sullivan 氏の Object Oriented CSS
※ そこの FAQ ページを眺めると、 ( 当たり前のことなんだけど ) ID セレクタよりクラスセレクタを重視しようという姿勢のようです。 クラスだから Object-oriented だ… ってことなのかなぁ f(^^;

さて、 マイコミジャーナルの記事の続き。

表示するページごとに若干表示をカスタマイズしようと考えれば、 body 要素に class 属性を追加して 「body.onsale .sidebar」 のように対象を特定してスタイルを適用するだろうと説明。

…ぇええ !? (@@;
そんなヘンなやりかたをするのが普通なの !?
私は手書きばっかりなので知らないのだけど、 そんな妙なことをやってくれるツールが多いの !?

OOCSS ではそのページ用のサイドバースタイルは別に用意し ( .onsalesidebar と名前がつけられている )、 HTML の方で 「<div class="sidebar onsalesidebar">」 のように記載することになると説明している。

…それがアタリマエじゃないですか~ f(^^;

その div 要素内に適用されるのは、 標準では "div.sidebar なんとか かんとか" と指定されたスタイルで、 そのページだけは、 それを "div.onsalesidebar なんとか かんとか" と指定したスタイルで上書きする、 と。

/* 標準のスタイルシート */
div.sidebar li { color: blue; }    /* リストは青色 */

/* そのページ専用のスタイルシート */
div.onsalesidebar li { color: green; }    /* リストは緑色 */

そのページでは、 head 要素内で、 標準のスタイルシートを指定してあるところより後ろに、 そのページ専用のスタイルシートを指定することになります。

<!-- 標準のページ -->
<link rel="stylesheet" href="標準.css" type="text/css">

<!-- そのページ -->
<link rel="stylesheet" href="標準.css" type="text/css">
<link rel="stylesheet" href="そのページ専用.css" type="text/css"><!-- 全部のページに指定してあっても構わない。 トラフィックがもったいないだけ。 -->

これで、
<div class="sidebar"> の中のリストは青色に、
<div class="sidebar onsalesidebar"> の中のリストは、 スタイルが上書きされて、 緑色になるわけです。 ( リスト以外の要素は、 標準と同じ。 )

"Object Oriented CSS" という名前こそ意味不明ですけど、 やってることは、 アタリマエのことをアタリマエにしようとする、 しごくまっとうなものだと思います。

|

« [.NET] ルビを生成してくれる、 ASP.NET 用 YomiganaServerLabel コントロール ~ International Feature Pack 2.0 Beta | トップページ | [Windows7] 日本でも Windows フィードバック プログラムが始まった »

プログラミング」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/209349/45441809

この記事へのトラックバック一覧です: "Object Oriented CSS" …名前なんて飾りです f(^^;:

« [.NET] ルビを生成してくれる、 ASP.NET 用 YomiganaServerLabel コントロール ~ International Feature Pack 2.0 Beta | トップページ | [Windows7] 日本でも Windows フィードバック プログラムが始まった »