日向夏特殊応援部隊

俺様向けメモ

「display: none」によるPattern Driven CSS

HTML CSS

d:id:ZIGOROu:20070118:1169089995 で提唱したPattern Driven CSS(以下PDCで略す)ですけど、昨日ふと思いついた事です。
あとちょっと追記しました。

「display: none」によるパターンのフォーカス

例えば下記のようなHTMLがあるとする。

<body>
  <div id="content-root" class="section">
    <h1>Yet Another Hackadelic</h1>
    <ul id="global-navigation">
      <li><a href="" title="">最新の日記</a></li>
      <li><a href="" title="">日記一覧</a></li>
      <li><a href="" title="">日記を書く</a></li>
      <li><a href="" title="">管理</a></li>
      <li><a href="" title="">ログアウト</a></li>
      <li><a href="" title="">ヘルプ</a></li>
    </ul>
    <div id="entry-1" class="section archive">
      <h2>タイトル１</h2>
      <p>
        なんか適当な本文がだらだらある。
      </p>
    </div>
    <div id="entry-2" class="section archive">
      <h2>タイトル２</h2>
      <p>
        なんか適当な本文がだらだらある。
      </p>
    </div>
    <div id="entry-3" class="section archive">
      <h2>タイトル３</h2>
      <p>
        なんか適当な本文がだらだらある。
      </p>
    </div>
  </div>
</body>

でこの時、div.archiveのみにスタイルを当てようと考える。
しかもdiv.archiveがページの中でどのように配置されるかは後回しにする。

こう考えた時、今まではページを独自に作ると推奨してみた物の、自分でいざやってみたらもの凄い大変だったので、現実的では無いと感じたのですが、
以下のように「display: none」を使うと結構楽してリキッドレイアウトする枠組みが出来るかも。

#content-root h1 { display: none; }
#global-navigation { display: none; }
#content-root div.archive { display: none; }
#entry-1 { display: block; }

ここまでお膳立てしてあげれば、事実上htmlは、

<body>
  <div id="content-root" class="section">
    <div id="entry-1" class="section archive">
      <h2>タイトル１</h2>
      <p>
        なんか適当な本文がだらだらある。
      </p>
    </div>
  </div>
</body>

と言う事になる。

よって適宜htmlをCSSによってシンプルにしつつ、スタイルを定義して行くと分かりやすいかもなぁと思いました。
ちょっと試してみたけどなかなか良いです。

追記

はてブコメントで「ブラウザで見えなくなるだけじゃ？」ってコメントがあったんで、一応補足。
仰る通りなんだけども、やりたい事は特定のパターン以外、一時的に見ないと言う事。

サンプルのhtmlだと分かりにくいので、別の例にしてみると、

<body>
  <div id="main" class="section">
    <!-- 中身略 -->
  </div>
  <div id="local-navigation">
    <!-- 中身略 -->
  </div>
</body>

div#main, div#local-navigationで２段組みしたいとすると、

body { width: 100%; }
body > div#main { float: left; width: 80%; }
body > div#local-navigation { float: left; width: 20%; }

みたいな書き方になるけども、このノリで書いて行くと「body > div#main」、「body > div#local-navigation」ベースで具体的にセレクタ書いて行くのがほとんどの人の例だと思いますが、
div#local-navigationを一旦忘れて、なおかつ実際80%の割当であるdiv#mainも100%扱いに一時的にする。div#mainはbodyのclass属性に例えば「debug」などを適当に突っ込んで、

body.debug > div#main { width: 100%; }
div#local-navigation { display: none; }

とすれば一時的にdiv#mainだけ100%になるはずだから、このdiv#mainにだけCSSの記述を集中的に書けるかなと。