"Object Oriented CSS" …名前なんて飾りです f(^^;
「object を orient している CSS」 ( CSS が object を orient している ) …って、 私にはまるっきり意味不明ですがw まぁ、 それは置いといて f(^^;
マイコミジャーナル : オブジェクト指向 CSS、 HTML 複雑だがパフォーマンスと再利用性向上
2009/06/22Kevin 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 フィードバック プログラムが始まった »
「プログラミング」カテゴリの記事
- 【.NET / Win8.1 ストアアプリ】 HttpClient で TLS 1.1 / 1.2 に対応するには(2018.06.17)
- 【VS2017 15.7pv2】 XAML のランタイム ツールに 「ヒートマップ」 が増えた(2018.03.28)
- 【.NET Core】 プロジェクトを作ると 「project.assets.json が見つかりません」 エラー(2018.02.10)
- 【#UWP】 ビットマップの表示色を変える (Win2D.uwp 経由で Direct2D を使う)(2017.08.23)
- 【#UWP】 CompactOverlay モード: Picture in Picture というか、「最前面に表示」するウィンドウを作る(2017.08.16)
この記事へのコメントは終了しました。
コメント