グローバルスタイル

#概要

すべてのページで必要なスタイルを、アプリの一か所から読み込むようにします。そのエントリーで複数のソースファイルをインポートできます。共通値、ドキュメントの既定値、コンポーネントルールを各担当のソースに置き、同じアプリスタイルシートから組み立てます。

先にフレームワークへのインストールを完了してください。以下の例は既存の CSS エントリーを拡張するもので、二つ目の Master CSS のインストールは不要です。

#一つのアプリエントリーから始める

アプリがすでに読み込むスタイルシートの先頭に、既定のインポートを保持します：

@import '@master/css';

このインポートは、theme, base, defaults, components, utilities の順序を含むプリセット定義とベーススタイルを取り込みます。インテグレーションはこのエントリーでプロジェクトの生成 CSS を配信します。各インストールガイドに従い、アプリのルート、ルートレイアウト、ビルドエントリーからインポートしてください。

ソースファイルを分けても、別の完全なエントリーは不要です。自身のファイルを app.css からインポートします：

@import '@master/css';@import './theme.css';@import './defaults.css';@import './components.css';

アプリのルートからエントリーを読み込みます。担当ごとにソースを分け、各インポート先で @master/css を再び @import する必要はありません。

テキストによる説明

1. 一度読み込む. アプリのルートは、既定の @master/css インポートで始まる app.css を読み込みます。
2. 担当ごとに分ける. app.css は共通値の theme.css、ネイティブなドキュメント既定値の defaults.css、共通コンポーネントルールの components.css をインポートします。
3. 一つのグラフを保つ. これらのインポートが一つのエントリーグラフを組み立てます。三つのソースファイルそれぞれに完全な Master CSS エントリーのインポートは不要です。

これらのファイルは一つのエントリーグラフを作ります。共通の定義は app.css に直接書いても、インポート先に書いても利用できます。各ルートスタイルシートで完全な Master CSS エントリーを再度インポートしないでください。各ファイルがエントリーになり、グローバルなネイティブ CSS が重複する場合があります。

#ドキュメントの既定値を設定する

プリセットのリセットは base に残します。製品のドキュメント既定値は defaults に置き、通常のコンポーネントとユーティリティの宣言で上書きできるようにします：

@layer defaults {  body {    background-color: var(--color-surface-base);    color: var(--color-text-body);  }}

追加のクラスなしで既定値を受け取る要素には、ネイティブのセレクターを使います。範囲を意識してください。グローバルな button ルールは、すべての機能内のボタンにも届きます。一つの製品上の役割に属するルールには、コンポーネントクラスを使います。

プリセットのベーススタイルは、すでにフォントトークンをドキュメントに適用しています。書体を選ぶには、タイポグラフィに従って変更してください。宣言が競合する場合はカスケードレイヤーを参照します。後から読み込んでも、より強いレイヤーへ移るわけではありません。

継承はドキュメントツリーに従います。ローカル宣言は設定するプロパティだけを置き換えます。

テキストによる説明

body の既定値が二つの子孫へテキスト設定を供給し、ローカルな code フォントは code 要素内だけでファミリーを上書きする。

#共通グラフに含めるものを決める

インポートする theme.css は、プロジェクトに必要な値から始めます：

@theme {  --spacing-card: 1.5rem;}

このトークンは p-card、gap-card と、そのキーに対応するほかの間隔ファミリーを登録します。宣言はプロジェクトが必要とするときに出力されます。エントリーグラフに置いても通常のトークンが静的になるわけではありません。

意味が共通だから定義を共有します。今同じ数値を使う二つの機能にも、別々のトークンが必要な場合があります。一つの要素が複数のクラスを使うだけでは、コンポーネント抽象が必要とは限りません。

#コンポーネントの担当を明確にする

たとえば共通の通知は components.css に置けます：

@layer components {  .notice {    padding: var(--spacing-md);    border: 1px solid var(--color-line-divider);    border-radius: var(--radius-md);    background-color: var(--color-surface-raised);    color: var(--color-text-body);  }}

<aside class="notice">Your changes are saved locally.</aside>

このネイティブセレクターは .notice にスタイルを付けますが、notice というユーティリティは登録しません。共通の状態と条件はコンポーネントルール内に書きます。Master CSS の修飾子を受け取るクラスレシピには @utility を使ってください。スタイルの再利用で動く例を比較しています。

エントリーグラフのネイティブ CSS は、未使用のコンポーネントルールも含め既定で出力されます。ネイティブの枝刈りは明示的に選びます。ネイティブの枝刈りを参照してください。定義を参照可能にするだけのために、大きなルート専用スタイルシートをグローバルグラフへ移さないでください。

#共通のヘルパーを追加する

グローバル定義は、可能なすべてのクラスにルールを生成せず、複数の機能に必要な動作を表せます。以下のヘルパーは関連リンクを配置し、画面外の内容のレンダリングを省き、印刷ではグループを除外します：

@utility flow {  display: grid;  gap: var(--spacing-md);}@utility content-auto {  content-visibility: auto;  contain-intrinsic-size: auto 32rem;}@utility print-hidden {  @media print {    display: none;  }}

<section class="content-auto flow print-hidden p-md b-solid b(1) b-line-divider r-md bg-surface-raised">  <h2 class="m(0) text-lg font-regular">Related guides</h2>  <a class="text-sm fg-text-body underline" href="/guide/theme" target="_top">Choose shared theme values</a>  <a class="text-sm fg-text-body underline" href="/guide/responsive-design" target="_top">Adapt a layout to its available space</a></section>

@layer theme {  :root,  :host {    --color-zinc-30: oklch(78% .0025 265);    --color-zinc-70: oklch(39.8% .0028 265);    --color-zinc-90: oklch(24.6% .0022 265)  }  :root,  :host {    --color-surface-raised: light-dark(var(--color-white), var(--color-zinc-90));    --color-line-divider: light-dark(oklch(0% 0 none / .12), oklch(100% 0 none / .12));    --color-text-body: light-dark(var(--color-zinc-70), var(--color-zinc-30))  }  :root,  :host {    --color-white: oklch(100% 0 none)  }  :root,  :host {    --font-weight-regular: 400;    --font-size-sm: .875rem;    --font-size-lg: 1.125rem;    --text-sm: var(--font-size-sm);    --text-sm--line-height: 1.5;    --text-sm--letter-spacing: 0;    --text-lg: var(--font-size-lg);    --text-lg--line-height: 1.5;    --text-lg--letter-spacing: 0;    --radius-md: .375rem;    --spacing-md: 1rem  }}@layer utilities {  .text-lg {    font-size: var(--text-lg);    line-height: var(--text-lg--line-height, normal);    letter-spacing: var(--text-lg--letter-spacing, normal)  }  .text-sm {    font-size: var(--text-sm);    line-height: var(--text-sm--line-height, normal);    letter-spacing: var(--text-sm--letter-spacing, normal)  }  .content-auto {    content-visibility: auto;    contain-intrinsic-size: auto 32rem  }  .flow {    display: grid;    gap: var(--spacing-md)  }  @media print {    .print-hidden {      display: none    }  }  .bg-surface-raised {    background-color: var(--color-surface-raised)  }  .b-line-divider {    border-color: var(--color-line-divider)  }  .r-md {    border-radius: var(--radius-md)  }  .b-solid {    border-style: solid  }  .b\(1\) {    border-width: calc(1 * 1px)  }  .fg-text-body {    color: var(--color-text-body)  }  .font-regular {    font-weight: var(--font-weight-regular)  }  .m\(0\) {    margin: calc(0 * 1px)  }  .p-md {    padding: var(--spacing-md)  }  .underline {    text-decoration-line: underline  }}

定義を既存の Master CSS インポートの後に置くか、アプリのエントリーから utilities.css をインポートします。クラスはマークアップで検出されると CSS を生成します。アプリの印刷プレビューで print-hidden を確認し、リンクを印刷にも出すならクラスを削除してください。自身のレイアウトの内容に合う内在サイズの見積もりを選びます。

ページ横断の確認と出力に基づく最適化手順は、CSS 配信の最適化を参照してください。

#ローカルの配信をローカルに保つ

アプリのエントリーはページ間で共通のスタイルに集中させます。インテグレーションがルートのスタイルシートへプロジェクト定義を供給するため、完全な Master CSS インポートの追加は不要です。グラフ外の追加定義には @reference を使いますが、参照したネイティブ CSS は配信しません。ローカルルールの配信は引き続きルートのローダーが担います。

この設定はルートレベルのスタイル、別々のアプリに独立したエントリーグラフが必要な場合はモノレポを参照してください。グローバルファイルを分けたら、定義を使うページと使わないページを確認します。共通スタイルは引き続きアプリのエントリーから届き、ルート専用ルールはローカルの担当に残る必要があります。