カスタムプロパティとモダンCSS
ブランドカラーの青を選んで、40個のルールに入力し、サイトをデプロイします。1ヶ月後、マーケティング部門がわずかに異なる青を要求します。今、あなたはすべてのスタイルシートを検索し、40個すべてを見つけられることを望み、大文字で綴られた2つを見落とさないように注意する必要があります。カスタムプロパティはこれを修正します。色を1回名前を付け、どこでもその名前を使用し、1つの場所で変更します。この単一の習慣は、テーマング、デザイントークン、リデザインから生き残るスタイルシートの始まりです。
変数の宣言と使用
**カスタムプロパティ**は、再利用するために名前を付けた値です。名前を2つのダッシュの前に書き、値を設定し、後でvar()で読み取ります：
:root {
--color-brand: #2563eb; /* 値を1回宣言して名前の下に配置 */
}
.button {
background: var(--color-brand); /* ここで読み取ります */
}
.link {
color: var(--color-brand); /* ここでも、同じ値 */
}--color-brandは名前（2つのダッシュは必須）、var(--color-brand)がその使用方法です。:root（これは<html>要素で、ページの最上部）で宣言すると、その名前はどこからでも利用可能になります。:rootの1行を変更すると、それを読み取るすべてのルールが更新されます。
--color-brandのように2つのダッシュで書き、var(--color-brand)で読み取ります。:rootに配置して、ページ全体で使用できるようにします。1行を変更すると、その名前を読み取るすべてのルールが一緒に更新されます。 カスケードと継承
別の言語で変数を使用したことがあれば、この次の部分は驚きです。カスタムプロパティは固定されていません。他のCSSプロパティと同じルールに従い、つまり、子要素に**継承**され、1つの場所で異なる値を与えることができ、残りを変更する必要がありません。
:root {
--color-text: #1f2937; /* ページ全体のデフォルト */
}
.callout {
--color-text: #92400e; /* 異なる値、.callout内のみ */
color: var(--color-text);
}
p {
color: var(--color-text); /* 通常は濃いグレー、コールアウト内では琥珀色 */
}同じvar(--color-text)は、ほとんどの段落では濃いグレーを与えますが、コールアウト内では琥珀色になります。コールアウトが独自の値を設定したためです。これがテーマングを可能にし、CSSがどのように機能するかでカスケードを見てきました。
var(--color-text)はほとんどの段落では灰色になり、コールアウト内では琥珀色になります。コンテナーの名前を再定義すると、その内部のすべてが新しい値を取得します。 フォールバックとcalc()
var()は第2の値を取ることができ、カスタムプロパティが設定されなかった場合にのみ使用されます。これは**フォールバック**であり、トークンが不足している場合でもルールが機能し続けることを確認します：
.card {
gap: var(--gap, 1rem); /* --gapが存在すればそれを使用、そうでなければ1rem */
}calc()を使用してカスタムプロパティで算数を行うこともできます。基本的な間隔値がある場合、2番目の数を硬くコーディングするのではなく、それから大きい値を作成できます：
:root {
--space-md: 16px;
}
.section {
padding: calc(var(--space-md) * 2); /* 32px、基本から導出 */
}この方法で値を導出するということは、--space-mdへの1つの変更が、その上に構築されたすべてを通じて波及することを意味します。
var(--gap, 1rem)は、トークンが存在すればそれを使用し、存在しない場合は1remにフォールバックするため、値が不足している場合もルールは機能し続けます。そして、calc()を使用すると、calc(var(--space-md) * 2)のように基本間隔の倍数の値を構築できます。基本を変更すると、その上に構築されたすべてが続きます。 テーマング
カスタムプロパティはツリーの下の方で再定義できるため、クラスの下でトークンを変更することで暗いテーマを構築でき、すべてのコンポーネントルールは放置できます：
:root {
--color-bg: #ffffff;
--color-text: #1f2937;
}
.theme-dark {
--color-bg: #0f172a; /* 同じ名前、新しい値 */
--color-text: #e2e8f0;
}
body {
background: var(--color-bg);
color: var(--color-text);
}ページにclass="theme-dark"を追加すると、--color-bgまたは--color-textを読み取るすべてのルールが暗い値に切り替わります。テーマスイッチを作成するためにbodyルールやコンポーネントを変更したことはありません。これは、16進数コードを直接書く代わりにトークンとして色に名前を付けることの見返りです。
class="theme-dark"のようなクラスの下に異なる値を持つ同じトークン名です。class="theme-dark"を設定すると、単一のコンポーネントも編集することなく、それらのトークンを読み取るすべてのルールが切り替わります。そのため、16進数コードを直接各ルールに入力するのではなく、色をトークンとして名前付けします。