Takazudo Clipping*

エリアとモジュール

• 繰り返し使用される要素の塊をモジュールと呼び、エリアの中にこれを並べてページを作成するのを基本とする。
• モジュールの開始要素には、「mod_moduleName」のようにclass（もしくはid）をつける。
• モジュールやエリアのclass/idを起点に全てのスタイルを指定する。p、h1～h6、blockquote、table等、要素自体に直にスタイルを指定してはいけない。（グローバル変数を使っているような状態になってしまうため、以降考慮するのが面倒。リセット程度に済ます。）
• モジュールにスタイルを指定する際には、mod_moduleNameを起点としてスタイルを指定し、カプセル化を行い、外の要素にスタイルが利かないようにする。
• エリア分けのための要素には、「area_areaName」でclass（もしくはid）をつける。

class、id内で使用されるアンダースコアとハイフン

• アンダースコアは、モジュールやエリアの型名、名称を表すために使用する。
• class="mod_moduleName" は、これで囲われる要素一式が、moduleNameという名前のモジュールであることを示す。
• id="area_areaName" は、これで囲われる要素一式が、areaNameという名前のエリアの内容であることを示す。
• ハイフンは、階層を表す。これは、モジュールやエリアがネストするときに、class名の衝突を防ぐために使用する。他のモジュールを内包する可能性のある（または、内包することを前提としている）モジュールにスタイルを指定するときに使用する。また、エリアは必ずその中に他のモジュールを内包するため、基本的にハイフンで階層を表したclassやidを起点にスタイルを指定する。（サンプルの mod_mediaBoxL、mod_mediaBoxC、mod_mediaBoxR や、エリアの個所を参照。） たとえば、ボディエリアの左ナビは area_bd-side にする等。
• 明らかにJavaScriptで利用されるために指定するclassは、js_popup のように、役割を明示させる。また、インラインで使用される要素に対し、in_icon、in_attention、in_highlight等といったクラスを指定するなど、汎用的に型を拡張してもよい。

bodyのclass

• bodyに指定するclassは特殊で、スタイルのブランチのために使用する変数の役割を果たす。ページ自体をJavaScriptにおけるオブジェクトとして置き換えて考えた場合、bodyに指定されたclass="xxx_yyy" は、page.xxx = yyy; のような役割を担う。
• bodyに指定するclassには、layout_layoutType を必ず含める。これは、そのページのレイアウトタイプを示す。
• サンプルでbodyのclassとして指定している layout_2colA は、このページのlayoutが2colAであることを示す。これは、エリアのレイアウトのために使用されている。たとえば別の２カラムのレイアウトが現れた場合は layout_2colB、トップページの特殊なレイアウトの場合は layout_top、ポップアップウィンドウの場合は、layout_pop のように指定し、これを起点にスタイルを指定する。（CSSエリアの個所を参照）
• サンプルでbodyのclassとして指定している category_product、templateId_productSpec は、このページの category が product、templateId が productSpec であることを示す。これは、現状、サンプルのページでは何にも使用されていないが、JavaScirpt等と併用し、グローバルナビの現在地表示をさせるためのフラグとして使用したりといった具合に、ページに紐付けたい変数のように使用する。
• layout_layoutTypeで指定するレイアウトタイプには、具体的な名称をつけるのを避けた方が良い。たとえば、サービスのページ用のテンプレートなのでlayout_service とつけ、このclassをブランチの起点として2カラムのエリアスタイルを指定たとしても、その後、そのレイアウトが、別のカテゴリで使用される可能性がある。最適な名前は、サイトの構造と、拡張性を考慮して判断する。（最適な名前が何かはサイト構造による）

（bodyにidをつけてブランチの起点とするのは、あまりいい考えでないように思う。たとえば、製品情報ページであれば、body id="product" かもしれないが、これだと、複数のブランチの起点をbodyに持たせることができない。そういったことを考慮し、body class="category_product" のようにし、複数のブランチの起点を設けられるようにしているつもり）

ブラウザ別CSS hack

• *property:value; をIE7以下向けに、_peoperty:value; をIE6以下向けに使用する。
  このCSS hackを使っているのは、１つもモジュールのスタイルが各所に分散し、管理性が落ちてしまうのを防ぐのが主な目的。 「OOCSS - FAQ - hacks」これに同意
• その他のブラウザに対してそれぞれのスタイルを指定したい場合、 /common/js/loader.js 内にブラウザ判別のスクリプトが用意されている。この中で、bodyに browser_browserName 形式でclassを追加し、これを起点にブランチさせてスタイルを指定し分ける。

共通画像について

• モジュールやエリア内で使用される共通画像は、/common/img の中にディレクトリを切り、その中に格納する。たとえば、mod_textNavList で使用される画像は、/common/img/mod_textNavList に格納する。複数のモジュールで共通使用される画像（アイコン等）は、都度、/common/img 内に適切なディレクトリを作り、そこに格納する。
• パフォーマンスやリクエスト数が気になる場合は、複数のモジュールで共通使用される画像をしっかり把握して管理したほうがベターだが、たとえ同じ画像をコピーし、増やすことになってしまおうとも、モジュールごとに、モジュールのディレクトリに使っている画像を全部突っ込んでしまった方が、管理は圧倒的に楽。モジュールが使われていないことが分かったらそのディレクトリごと消すだけで済むし、「モジュール間で共通の画像」として管理した場合、その画像が使われているか否かが判断できなくなってしまうため、その画像を２度と消すことができなくなってしまう。

余白の管理

• 基本的に、全てのモジュールは、下に余白を設ける。見出しの上を開けたい時、余白を開けて目立たせたいモジュール等に限り、上に余白を設ける。
• 基本的に、モジュール終端地点の下への余白はpaddingで指定し、モジュールの開始位置から上への余白はmarginで指定する。（marginの相殺を利用すると複雑になったり、ブラウザによっては相殺が起こらないケースが発生するため。）
• メインエリアを、articleHd、articleBd、articleFt の3つのエリアに分割している。これは、大体の場合、「リード文が入るすぐ下に余白を広く設けたい」 「ページの最後のナビだったり、Adobe ReaderやFlashダウンロード案内が最後につくので、この上の余白を少し広く設けたい」 というケースが多いので、こうしてある。上に余白をとるとあれがこーなってとか考えるよりか楽だと思うし理解が容易だと思うので。

JavaScript

• jquery.bodyScroller.js： スムーズにアンカースクロールする
• jquery.mediaBoxAdjuster.js： mod_mediaBoxの補助（display:tableが使えないブラウザに対して、無理矢理table要素を作ってソースを置き換える）
• forjs.css： loader.jsから読み込まれるCSSでJavaScript onの時しか読み込まれない。JavaScript offの環境を考慮するためのスタイルをここに書く

その他

• bodyのline-heightには、mod_p（最も基本的な段落のモジュール）に指定したいものを指定し、見出しやリストなど、line-heightの調節が必要になる個所については、個別に指定する。見出しやリストは、line-height を低めに設定する。（文字が大きくなると、比例して行間が大きくなる＆リストだと、リスト間の区切りを意識させるために行間を縮めた方がベター）
• テンプレートやモジュールの数が膨大になるとき、CSSファイルを分割して管理する。
• モジュールは、1つの軸で完全にカテゴライズできるものではないので、CSSファイルを整理しようと、カテゴライズに時間をかけるのは避ける。たとえば、サンプルにある mod_textNavList は、リストのグループに所属するかもしれないが、ナビのグループに所属するとも考えられる。特定のテンプレートでのみ使用されるなど、明確な基準がある場合のみ、分類するなどにとどめておいた方がよい。なお、そのように明確に分類できる場合は、CSSファイル自体を分けてしまった方が良い。

ぶつくさ

全てのスタイルは、mod_moduleName、area_areaNameを起点にスタイルを指定するって言う風にしておけば、その中ではかなり自由にスタイルが指定できます。単純なclass名を使っても被ることは無いので、blockってclass名を使ったら、あら、なんか別のが効いちゃったみたい。なんだかしらないけどpにスタイルが利いてるんだよね・・・うわーってなことを防げます。基本はモジュールベースで作っていき、場合によりbodyのclassでブランチさせるっていう感じです。モジュールの中では、極力classを使わずに、単純に書くと。

でもMTのwysiwygでやるときとか全部こんな風にclass名つけらんないしーって言う場合は、チョイ考え方を変えて、wysiwygで作成されるエリアを一つのモジュールだと考えればいい感じです。mod_wysiwygBlkとかなんとか。

ここで用意しているテンプレートだけでは、サイトを作るのには不足しているかと思います。そーいう場合は、どんどんモジュールを増やしていきます。HTMLテンプレートを作るって言うのは、次々に来たり変更されたりするデザインや原稿を、余白や共通部分のルールを考慮しながら、モジュールの粒度を気にしつつ空気を読みながらまとめていくのが仕事かと思います。たぶん。

量産時には CLCL 等のクリップボードツールにモジュールを１個ずつ登録しておくとすごい楽です。

IE6が滅びたら、class="mod_moduleName" のような指定の仕方は、class="mod moduleName" に置き換えられるようになる予定です。なぜなら、IE7以降であれば、複数クラスのセレクタが使用できるるため。（Takazudo Clipping* - CSSで複数のclassを指定する）。この点で苦しんだ結果がこのxxx_yyyといった感じです。子供セレクタも普通に使用できるようになれば、ハイフンもいらず、もっともっと安全で組みやすい形になるはず。まぁでも普通に見られるサイトでそれが使えるようになるにはもっと後の話ー。

--

ここで配布しているテンプレートを使う場合、特に許可などは要りませんが、YUI reset cssのライセンスはYUIを参照、JSライブラリのライセンスは各ソースを参照。

↓ 一通りまとめようと思ったきっかけ （このエントリで説明している内容はOOCSSではありません（念のため））

• Object Oriented CSS
• Object Oriented CSS - gitHub
• sitepoint: First Look: Object Oriented CSS

↓ かなり昔からぶつぶつ言ってます

• Takazudo Clipping* - class名のつけ方
• Takazudo Clipping* - サイトタイプ別class名管理方法