モジュール組み

Takazudo edited this page May 11, 2011 · 5 revisions

モジュール組み

パーツをモジュール化してHTMLテンプレートを組むための概念。
モジュールとは、ページを構成する小さなパーツの単位。
モジュールが並べられてページが成り立つと考える。

###例 具体的なページ :
http://bp-mobile.pxgrid.net/
モジュールの一覧 :
http://bp-mobile.pxgrid.net/_template/modules.html

なぜモジュールか

例えば1000のページを作るとき、1000枚のデザインを起こすのは非効率な方法と言える。そのような考えのもとでページを作っていけば、同じようなCSSを何度も何度も書くことになり、CSSの容量・数は無限に増えてしまう。このような状況を回避するため、ページを構成するデザインパーツの単位を「モジュール」と考え、この組み合わせでページを作っていくのがモジュール組みの基本的な考え方。

モジュール組みでHTMLテンプレートを設計する場合、初めの段階で、使われるモジュール群を全てコーディングしてしまう。このコーディングを行うのは、基本的に一人だけにする。この一人が作ったモジュール群をコピペしながら大量のページを作っていく。

何がモジュールか

どのような単位がモジュールなのかという明確な取り決めは無い。
むしろ、設計・デザイン段階より、ページがどのようなモジュールの集合で組み立てられるか考えておく必要がある。
もしモジュールベースで考えられていないデザインをコーディングする時は、デザインを構成する要素らをモジュールに切り分け、HTMLテンプレートに起こすという設計作業が必要になる。

モジュールのコーディング

例1: お問い合わせブロック

HTML

<section class="mod-contact">
	<h1 class="h">お問い合わせ</h1>
	<div class="img"><img src="/common/img/_dummy/1.png" width="100" height="100" /></div>
	<p class="p">Webサイト開発のフロントエンドを担当します。Webサイト開発のフロントエンドを担当します。Webサイト開発のフロントエンドを担当します。</p>
	<p class="nav"><a href="http://www.pxgrid.com/">株式会社ピクセルグリッド</a></p>
<!-- /.mod-contact --></section>

CSS

/**
 * .mod-contact
 */
.mod-contact{
	padding:15px;
	overflow:hidden; /* clear float */
	margin:0 0 .75em;
	border:1px solid #444;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}
	.mod-contact img{
		vertical-align:top; /* kill img space */
	}
	.mod-contact .h{
		padding:0 0 .5em;
	}
	.mod-contact .img{
		float:right;
		padding:0 0 10px 10px;
	}
	.mod-contact .p{
		overflow:hidden;
		padding:0 0 8px;
	}
	.mod-contact .nav{
		clear:both;
	}

モジュールには名前を付ける。
この名前は、mod-モジュール名 という形式にする。
この名前をクラスとして、モジュールを構成する一番外側の要素に付与する。
そして、このモジュールを構成する全ての要素は、このクラス名を起点にスタイルを当てる。

モジュール内で使用されるクラス名には、特別なルールは無いが、極力、ハイフンを含めないようにする。
このように全てのモジュールを組み立てることで、モジュール同士でのクラス名の競合を防ぐ。
全てのモジュールのスタイルが、.mod-モジュール名 から始まるセレクタで定義されていれば、モジュール内でのスタイリングに、どのような単語を使っても問題ないことになる。

例2: 段落

HTML

<p class="mod-p">段落です段落です</p>

CSS

/**
 * .mod-p
 */
.mod-p{
	padding:0 0 .75em;
}

p要素は、HTMLで定義されている段落を示す要素であるが、段落をページの中に用意したい場合は、例えば、「mod-p という段落モジュールを用意する」と考える。

これが p{ padding:0 0 .75em; } であってはならない。
なぜなら、p要素は、それ単独で使われるだけでは無く、他のモジュール内でも使用される可能性があるからである。

例えば、例1でもp要素が使用されているが、この例1を作るとき、p要素にはどんなスタイルが当たっているのか、気にする必要はない。なぜなら、全てのモジュールは、.mod-モジュール名 から始まるセレクタによりスタイルが定義されているので、新しいモジュールを作る時、div, span, p, h1, h2... 等の、HTMLを構成する基本的な要素は、リセットされたままに保たれているからである。

モジュール組みにおいて、モジュールのスタイルを書くときは、そのモジュール外の要素に対して、一切影響しないようカプセル化してCSSを書くのを基本とする。

classとidについて

モジュール組みを行う時、モジュール名をクラス名とし、これを起点にスタイルを当てると上記で書いたが、これはid属性であってはならない。以下がその理由。

  • モジュールがユニークであるか否かを、将来のことまで見越して確実に判断することは不可能。
    #mod-モジュール名 を起点にスタイルを当てていたと仮定し、それ以降、1つしかページ内に存在しないと思っていたそのモジュールが、そのページの中で再度使用される状況が発生した場合、多くのページを書きなおさなければならない可能性が発生する。
  • idとclassでは詳細度に差が出てしまう
  • JavaScriptを使い、複数のページを1つの文書内に存在させることがある。
    この場合、同一のidを持つ要素が複数存在してしまうことになる。
    例:ページがスライドして切り替わるUI
    これは、ヘッダやフッタといった、絶対に一つしか存在しえないようなモジュールに関しても同様。

画像について

モジュール内で使用される画像(主に背景画像)は、そのモジュール専用の画像ディレクトリを作り、そこにまとめる。
例えば、mod-productInfo で使用される画像は、/common/img/mod-productInfo/ 内に格納する。
ただし、矢印やアイコンなど、複数のモジュールで共通使用される画像については、このルールに必ずしも合わせる必要は無く、適宜ディレクトリわけを行う。基本的には、モジュールを構成する画像は全て、そのモジュール専用の画像ディレクトリに格納するものの、共通の画像が現れたら整理するといった考えでよい。

モジュールの入れ子について

後で書く

モジュールを拡張するクラスについて

後で書く

モジュールの継承について

後で書く

入れ子を許容するモジュールについて

後で書く

よく使うクラスについて

あとで書く
innerとかwrapとか。

既存サイトに新しいモジュールを追加するばいいについて

あとで書く jQuery uiみたいにガチガチにクラス固めて書くとか

自由にクラスを付けられないような状況について

例えば、多くのブログは、記事をWYSIWYGのような仕組みで更新するが、この中に入れる一つ一つのp, ul等にクラスを当てるのは、記事を書く人物がHTMLに詳しくない限り、かなり厳しいと見込まれる。このような場合、例えば、そのWYSIWYGで編集する領域を mod-entry という一つのモジュールとして考え、これを起点にスタイルを当てる。

モジュール組みが実現したいことは、安全で保守性の高いHTMLテンプレートであり、運用負荷を高めることではない。何がモジュールかを、機能や要件により随時適切に判断する。

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.