ナビゲーション
基本概念

カスケードレイヤー

ユーティリティで共通コンポーネントを上書きし、ルールの競合、レイヤー外の CSS、重要度の影響を調べます。

このページの内容

#概要

セレクターの詳細度を上げずに、一か所だけスタイルを調整できます。共通のコンポーネントルールを components レイヤーに置き、各インスタンスのユーティリティで変更が必要なプロパティを上書きします。

後のレイヤーが局所的なパディングを決める

これらの通常の宣言では、utilities が components より優先されます。HTML のクラス順序を変えても結果は変わりません。

テキストによる説明
  1. 順序を定める. プリセットは theme、base、defaults、components、utilities の順にレイヤーを宣言します。
  2. 宣言を比較する. ネイティブの collection-card コンポーネントは 1.5rem のパディングを指定します。同じ要素に対し、p-sm は後の utilities レイヤーで 0.75rem を指定します。
  3. 結果を確認する. これらの通常の宣言ではユーティリティが優先されます。ルートのフォントサイズが 16px なら、計算済みのパディングは 12px です。

#コンポーネントを局所的に上書きする

CSS のカスケードレイヤーは、セレクターの詳細度を比較する前に、宣言のグループに優先順位を与えます。再利用するコンポーネントのスタイルを components レイヤーに置き、特定のインスタンスで別の値が必要なときにユーティリティを追加します。

共通コンポーネントを局所的に調整

@layer components {  .collection-card {    padding: 1.5rem;    border: 1px solid var(--color-line-divider);    border-radius: var(--radius-lg);    background-color: var(--color-surface-raised);  }}
生成された CSS
@layer components {  .collection-card {    border: 1px solid var(--color-line-divider);    border-radius: var(--radius-lg);    background-color: var(--color-surface-raised);    padding: 1.5rem;  }}@layer theme {  :root,  :host {    --color-zinc-40: oklch(68.6% .0028 265);    --color-zinc-60: oklch(48.6% .003 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-muted: light-dark(var(--color-zinc-60), var(--color-zinc-40))  }  :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-lg: .5rem;    --spacing-xs: .5rem;    --spacing-sm: .75rem;    --spacing-lg: 1.5rem  }}@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)  }  .grid-cols\(1\) {    display: grid;    grid-template-columns: repeat(1, minmax(0, 1fr))  }  .fg-text-muted {    color: var(--color-text-muted)  }  .font-regular {    font-weight: var(--font-weight-regular)  }  .gap-lg {    gap: var(--spacing-lg)  }  .m\(0\) {    margin: calc(0 * 1px)  }  .mt-xs {    margin-top: var(--spacing-xs)  }  .mb\(0\) {    margin-bottom: calc(0 * 1px)  }  .wrap-anywhere {    overflow-wrap: anywhere  }  .p-sm {    padding: var(--spacing-sm)  }}
どちらのカードも内容とコンポーネントクラスは同じです。1 枚目のパディングは 24px です。2 枚目には p-sm を追加しているため、ルートのフォントサイズが 16px のこのプレビューでは 12px になります。角丸、ボーダー、サーフェスは変わりません。

プリセットでは、通常の宣言に対して次の順序を定めています。

@layer theme, base, defaults, components, utilities;

p-sm ユーティリティは、HTML 属性内でのクラスの位置にかかわらず、コンポーネントのパディング宣言より優先されます。この順序と適用範囲はカスケードの仕様を参照してください。

このユーティリティが変更するのはパディングだけです。コンポーネントを置き換えたり、ほかの宣言を削除したりはしません。小さな局所調整のために、別のコンポーネントバリアントや !important 宣言を追加する必要はありません。

#ネイティブルールを意図したレイヤーに置く

どのレイヤーにも属さない通常のルールは、名前付きレイヤー内の通常のルールより優先されます。ユーティリティがコンパイルされているのに効かない場合は、レイヤーに属さないコンポーネントルールがないか確認してください。

/* This normal rule wins over a layered padding utility. */.collection-card {  padding: 1.5rem;}

その共通ルールをユーティリティで上書きできるようにしたい場合は、@layer components に移します。意図しないレイヤー境界を補うためだけに !important を追加しないでください。

レイヤー外のルールは、レイヤー内の通常ルールより優先される

ここでは作成者による通常の宣言を比較しています。重要な宣言には別のレイヤー優先順位が適用されます。

テキストによる説明

図では components の後に utilities が並び、その両方より上にレイヤー外のルールが分けて配置されています。適用されるパディングは、そのレイヤー外のルールによるものです。

レイヤーは、カスケードのほかの規則を置き換えるものではありません。重要度は通常のレイヤー優先順位より先に評価され、!important はレイヤー間の順序を逆転させます。インライン宣言、アニメーション、トランジションにもそれぞれの優先順位があります。これらの規則は CSS カスケード仕様、プリセットの順序は Master CSS のレイヤー仕様を参照してください。

#競合する宣言を調べる

  1. ブラウザーの開発者ツールで要素を選び、計算済みスタイルでプロパティを探します。そこから実際に適用されている宣言を確認します。
  2. 両方のルールがその要素を対象とし、それぞれの条件も一致していることを確かめます。
  3. 各宣言がどのレイヤーに属するかを調べます。レイヤー外のネイティブ CSS も確認してください。
  4. 局所的な上書きを追加する前に、広く適用する既定スタイルを意図したレイヤーに置きます。
  5. レイヤー順序だけでは結果を説明できない場合は、重要度とネイティブのカスケード規則を確認します。

通常の Master CSS エントリーからベーススタイルシートを読み込んでください。生成されたルールにはレイヤーブロックが含まれますが、ベースとなるレイヤー順序の宣言は追加されません。

collection-card p-sm を p-sm collection-card に入れ替えても解決しません。HTML のクラス順序はカスケードを制御しないためです。同じ条件のユーティリティ同士が重なる場合は、コードのリントで競合を見つけ、どちらの宣言を残すべきか確認してください。