[XHTML]WebサイトのOOP

Webサイトはオブジェクトの集合体。
CSSもオブジェクト指向。

オブジェクトの集合なら、命名規則やデザインパターン作っておけば再利用はしやすくなる筈。
WebSiteでもOOP（Object Oriented Programming）的なこと出来る？
…となんとなく考えた事を適当に羅列してるメモです。まとまり皆無。思考ダダ漏れ注意。

Class

1. Header -> #header
2. Sidebar(Menu) -> #sidebar
3. Contents -> #contents,#wrapper,#container
4. Form ->#form,#contact
5. Fotoer ->#footer

Method

• List (UL,OL,DL) -> #menu,#navi,#navigation,#globalnavi
• Headering Title (H1～H6) -> #page-title,#sitename,#content-title
• Text Section -> div.post , div.section , div.entry
• Buttons (input type=”button”,button tag, block style Ancher)　-> #submit,#reset
• Input (form elements)
• Copyright (address) -> #copyright
• Image (floating style, ancher style)
• Table

Property

• Inlines (strong,em,tt,code…etc)
• Blocks (div,p,address,blockquote…etc)
• String (plain text)

4BOXとか5BOXとかのレイアウトテンプレートは中身が空のクラス、つまりこんな状態です。

class Header {
}

中身とかいれてみる

div#header {
   p#sitename{ a{ img } }
   ul#global .navi{
      li{ a{img} }
      li{ a{img} }
      li{ a{img} }
   }
   ul#extra .navi{
      li{ a{string} }
      li{ a{string} }
   }
}

▼ソース

<div id="header">
<p id="sitename"><a href="#"><img src="rogo.png" /></a></p>
<ul id="global" class="navi">
<li><a href="#"><img src="menu.png" /></a></li>
<li><a href="#"><img src="menu.png" /></a></li>
<li><a href="#"><img src="menu.png" /></a></li>
</ul>
<ul id="extra" class="navi">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>

上のをそれぞれ一つだけにする

div#header {}
   p#sitename{}
   ul#global {}
   ul#extra{}
   .navi{}
   a img {}
   li {}
  a {}

最低これだけCSSがあればOKと。

▼タグとか含めてリストアップ

1. div, ul, li, a, img, p
2. ul li, li a, a img
3. ul.navi
4. div#header , ul#global, ul#extra, p#sitename

CSSの上書き・継承は1[内](弱)→4[外](強)
オブジェクト内に一つしかない要素は命名しなくてもスタイルをつけられるが、
名前つけといた方が用途が分かりやすくなる場合がある。上のソースだと#sitenameとか。

命名規則

名前見ただけで用途や目的が何か分かるのが理想。
全部小文字ならスペースの変わりにアンダーバーかハイフン、大文字おｋならキャメル記法も有り。
URL、IDまたはclass、画像名（srcまたはディレクトリ）を統一。

ex.
div#header　→　images/header/　header.php　header_*.gif

header.php　→　ヘッダー div#header
footer.html　→　フッター　div#footer
/wordpress/ →　#wordpressや.wordpressのディレクトリ
bg_*.gif　→　背景
btn_*.gif　→　ボタン
hn_*.gif　→　タイトル要素
ID_*.gif　→　ID名
class_*.gif → class名
tag_*.gif　→　タグ名