さらに、よりよいXHTMLコーディングを考える…


半年ほどちんたら更新してきた当ブログですが、前回の記事には意外にも反応があってびっくりしています。コメント本当にありがとうございます。

改めて前回の記事を見返してみて、「正しい」という表現が適当じゃなかったかもしれません。別段、定義リストを使ったコーディングにたいして、おまえは間違っていると糾弾するつもりはないんです。個人的に嫌だなと思うだけで。まぁ好みは色々あるでしょうし。

ここで前回「よろしくない」と例に挙げた新着ニュースリリース部分のコーディングを再度ご紹介。

<dl id="news">
<dt>2009.06.02</dt>
<dd><a href="~">ニュースのタイトル</a></dd>
<dt>2009.06.01</dt>
<dd><a href="~">ニュースのタイトル</a></dd>
</dl>

制作の現場では複数人数でのコーディングが当たり前、客から突然仕様変更を言い渡されることも当たり前です。たとえば上記のコーディングで突然、ニュースのカテゴリもテキスト表示してくれとなった場合。ddをもう一つ追加するわけですが…

<dl id="news">
<dt>2009.06.02</dt>
<dd class="category">製品情報</dd>
<dd><a href="~">ニュースのタイトル</a></dd>
<dt>2009.06.01</dt>
<dd class="category">採用情報</dd>
<dd><a href="~">ニュースのタイトル</a></dd>
</dl>

CSSには当然ddに対してスタイルが設定されているので、どちらかにクラス名を追加しなきゃならない。場合によっては両方につける羽目になり、CSSも一部書き直し…。それは嫌だからddの中にspanを挿入する? システムが組みあがってからこういうマークアップ上の変更をするのは結構めんどくさいです。

と言うことを考えると、最初から出来るだけ細かく、各要素には意味のあるクラス名をつけておくのがよい、というわけです。CSSも見やすくなります。

#news dd {
・・・
}

と書かれていたのでは、いったい何に対してスタイルを設定しているのかCSSだけを見ても分かりませんが…(まぁなんとなく分かりますが)

#news .entry-title {
・・・
}

こちらの方がより、自分のあとにCSSを触る人に対しても親切です。

でも「意味のあるクラス名」の付け方にはどういう基準があるのか? この基準がないと、class名を考えるのに無駄な時間を使ってしまい、かえって効率的ではなくなってしまいます。

そのヒントになりそうなのがMicroformatsというわけなのですが、徹夜の開発中なのでまた次回…

さらに、よりよいXHTMLコーディングを考える…」への3件のフィードバック

  1. 毎回タイトルと概要が存在するなら、

    2009.06.10製品情報
    ニュースのタイトル

    とすればいいんじゃないかなと思います。
    こうしておけば内がアンカー付きのテキストであろうがなかろうが比較的簡単に対応できるかと。

  2. あ~変換されちゃうんですね…
    以下書きたかったソースです。

    <dt><span>2009.06.10</span>製品情報</dt>
    <dd><a href=”xxx”>ニュースのタイトル</a></dd>

    1. 確かにほとんどのデザインに対応できそうで問題はないと思いますが…

      「製品情報」の部分は何の情報?
      というのが分かりませんよね…

      <dt><span class=”updated”>2009.06.10</span><span class=”category”>製品情報</span></dt>
      <dd><a href=”xxx”>ニュースのタイトル</a></dd>

      とした方がさらにいいんじゃないかと。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です