1. CSSの3層構造
-
base: 基本スタイル
サイトレベルの、最も基礎的で汎用的なスタイル。異なるスタイルやコンテンツのサイトでもbaseスタイルを共有できます。
baseは原子的なもので、これ以上分割できません。例えば、互換性の高いflexやclearfixなどです。
resetはbaseと並列する基本スタイルコンポーネントですが、もちろん、シンプルなresetをbaseレイヤーに含めることも可能です。
-
common: 共通スタイル
モジュールレベルのカスタムスタイルモジュール。各ページで再利用可能です。
baseレイヤーを基盤として、カレンダーやポップアップなどのより複雑なスタイルモジュールを提供します。
-
page: ページスタイル
ページレベルの、再利用を必要としないスタイル。
特定のページに対して、固有の色指定、フォント、ハックなどのスタイルを追加します。
合理的な階層化により、スタイルの再利用性を効果的に高めることができます。上位レイヤーで下位レイヤーの特定のスタイル規則を単純に上書きすることで、最終的なスタイルを変更できます。また、スタイルの保守性も向上し、各レイヤーの役割が明確になり、新しいスタイルを適切な場所に配置できます。HTMLではclassを組み合わせることで最終的なスタイルを実現します。
baseレイヤーとcommonレイヤーは、少人数の担当者が管理・保守すべきであり、頻繁に変更されることはありませんが、拡張は可能です。開発者はUIデザインに基づいて直接pageレイヤーのスタイルを完成させ、視覚効果を実現します。pageレイヤーのスタイルを記述する際も、同様に3層構造で整理できます。例えば：
/* base */
body {
background-color: #eee;
}
h1 {
border-bottom: 1px solid #ccc;
}
/* common */
.panel {
border: 1px solid #ddd;
}
.line {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* page */
h1 span {
border: 1px solid red;
border-raduis: 3px;
}
.panel .line {
line-height: 1.5em;
}
pageレイヤーのスタイルを記述する際の鍵は、commonレイヤーのスタイルを決定すること、つまりモジュールをいかに分割するかです。デザインから類似した部分を抽出してモジュールとして抽象化します。合理的なモジュール分割には、commonレイヤーとpageレイヤーのバランス、および拡張性を考慮する必要があります。commonレイヤーが肥大化しすぎると、pageレイヤーのコードがほとんどなくなってしまい、逆にcommonレイヤーが単純すぎると、pageレイヤーで大量の子孫セレクタを使用してスタイルを埋める必要があります。原則として、可能な限りシンプルさを保ちつつ、将来の変化に対応できるよう多くの拡張性を提供することです。
2. JSの3層構造
-
base: 基本ユーティリティライブラリ
JS APIを拡張し、より使いやすいインターフェースを追加します。
ネイティブAPIは機能が比較的弱いため、baseレイヤーでgetElementsByClassNameやtrimなどのインターフェースを拡張できます。
-
common: コンポーネントライブラリ
カスタムコンポーネントの提供や、カレンダー、Ajax、Cookieなどの機能モジュールのカプセル化を行います。
また、プルリフレッシュや上拉読み込み（無限スクロール）など、プロジェクトで頻繁に使用されるコンポーネントを提供することもあります。
-
page: ページスクリプト
特定の業務ロジック向けに記述された、再利用を必要としないスクリプト。
通常はHTMLに対応しており、各HTMLファイルに対して1つのpageレイヤーのJSファイルが対応します。
JSの階層化の役割は、段階的な強化にあります。ネイティブAPIを一歩ずつ強化し、pageレイヤーの開発をより便利にします。これには適切な例えがあります。ネイティブJS APIは、でこぼこ（ブラウザの互換性問題）の田舎道（ネイティブAPIの低レベル機能の不足）のようなものです。baseレイヤーを追加することは、道を平らにし広げることに相当し、commonレイヤーはさらにその道にアスファルトを敷くようなものです。その後のpageレイヤーの開発は、よりスムーズで簡単になります。
baseレイヤーとcommonレイヤーの唯一の違いは、commonレイヤーのコンポーネントの方が規模が大きいことです。どちらも互換性の問題に対処する必要があります。commonレイヤーはbaseレイヤーの上でより強力なモジュールを提供します。pageレイヤーの中でページをまたいで再利用可能な部分は、commonレイヤーまたはbaseレイヤー（規模に応じて）に追加すべきです。
実際のアプリケーションでは、JSの3層構造がそのまま使われることは少ないです。なぜなら、jQueryやYUIのような強力なサードパーティライブラリがあり、これらがbaseレイヤーとcommonレイヤーの両方の機能を提供しているからです。それでも、3層構造を採用してpageレイヤーのコードを整理し、再利用可能な部分をプロジェクト全体のbaseレイヤーおよびcommonレイヤーとして抽出することは可能です。baseレイヤーとcommonレイヤーを構築した後は、サードパーティライブラリはbaseレイヤーと並列する基礎コンポーネントとなります。
コメントはまだありません