トップ «前の日記(2009-07-20) 最新 次の日記(2009-07-27)» 編集

Ussy Diary


2009-07-26

[JavaScript][CSS][html]HTML の保守性

ソースコードの保守性って話はよく上がるんですが、 HTML の保守性はどうなんだろうってふと思いました。

様々なサイトの HTML コードを見ると、きちんと要素に id/class が割り当てられているものもあれば、そうでないものもあります。スタイルが CSS によって直接要素に割り当られていると、 DOM で新たにノードを追加したときに予期せぬ表示が行われます。既存ページへの被害を押さえるために、 CSS への変更は行わず追加したノードに対して !important をスタイルに割り当てて回避しています。

一方 JavaScript ではセレクター、 XPath を使ってノードを特定しやすい構造が好まれると思います。 id や class 属性を変えると、スタイルが崩れるだけでなく動作もしなくなります。個人責任とはいえグリモンもあっという間に使えなくなります。

DOM による構築は当たり前になっていますが、これからより DOM を利用する機会は増えてくると思います。既存ページへの拡張を行うといったときに、誰でもスムーズに拡張が行えるようなそんなページをつくれるように意識したいところです。

現時点でページをつくるときに自分が意識していることです。

  • div 要素で大まかにセクションを分けて id を与える
  • セクション内の小セクションのブロック要素に対して class 属性を与える
    • 特定できる場合は id も与える
  • 繰り返し項目は、一項目ごとに区切って class 属性を与える
  • スタイルは id/class に割り当てる
    • img の border など本当に共通なものは例外
  • xhtml を意識する
    • html であればいいけど xml であって不便なことはない
  • 書き方を統一する
    • インデントをそろえる
    • タブ、スペースを統一する(自分はスペース)