Pages
Capsule and Separation CSS
Pages（ページズ）は、「Webサイトのページ」を意味し、LayoutやObjectなど、すべての要素を包括するもっとも大きい概念です。
サイト全体、もしくはページごとのルールを記述でき、 必要に応じて配置されるすべての要素のスタイルをもっとも強い立場で上書きできます。
ページ固有のobject上書きや、ブラウザ固有バグ回避のCSS、印刷用スタイルの記述など、汎用的に使用できます。
Pagesの活用例
- objectの例外パターン上書き
- ナビゲーションのページ別アクティブ表現
- 異なるobjectの隣接セレクタによる配置制御
- 状態変化におけるページ全体に影響する対応
- Atomic Designの「pages」の管理
- 特定のブラウザやOSによる処理
- 印刷メディアの簡易対応
- ページ個別インポート用CSSのファイル物理化
Pagesの使い方
「pages/」内部のサブディレクトリや、設置するファイルにルールや制限はありません。
上記の例のように、ページという概念に属するものであれば、何にでも使用できます。
活用する設計思想や手法、独自に定めたルールに基づき管理してください。
物理的なCSSファイルの出力
メインのCSSとは別に、異なるCSSを特定のHTMLファイルから追加でインポートしなければならない時は、このディレクトリにパーシャルのないSassファイルを配置し、物理化ファイルとしてコンパイルします。
※pages/というディレクトリとともに物理ファイル化されるため、相対パスによる制作環境の場合はカレントから一階層下がることに注意してください。