Pages

Capsule and Separation CSS

Pages/CASC CSSカテゴリ

Pages(ページズ)は、「ウェブサイトのページ」を意味し、LayoutやObjectなど、全ての要素を包括する最も大きい概念です。

サイト全体、もしくはページごとのルールを記述でき、 必要に応じて配置される全ての要素のスタイルを最も強い立場で上書きできます。

ページ固有のobject上書きや、ブラウザ固有バグ回避のCSS、印刷用スタイルの記述など、汎用的に使用できます。

Pagesの活用例

  • objectの例外パターン上書き
  • ナビゲーションのページ別アクティブ表現
  • 異なるobjectの隣接セレクタによる配置制御
  • 状態変化におけるページ全体に影響する対応
  • Atomic Designの「pages」の管理
  • 特定のブラウザやOSによる処理
  • 印刷メディアの簡易対応
  • ページ個別インポート用CSSのファイル物理化

Pagesの使い方

「pages/」内部のサブディレクトリや、設置するファイルにルールや制限はありません。
上記の例のように、ページという概念に属するものであれば、何にでも使用できます。

活用する設計思想や手法、独自に定めたルールに基づき管理して下さい。

管理ディレクトリの命名

役割と目的優先の分類名により、「pages/」は、以下の例ような異なるディレクトリ名に変更しても構いません。

「site/」 「inclusion/」

物理的なCSSファイルの出力

メインのCSSとは別に、異なるCSSを特定のHTMLファイルから追加でインポートしなければならない時は、このディレクトリにパーシャルのないSassファイルを配置し、物理化ファイルとしてコンパイルします。

※pages/というディレクトリと共に物理ファイル化されるため、相対パスによる制作環境の場合はカレントから一階層下がることに注意してください。