カスタムプロパティパターンカタログ
堅牢なデザインシステム、レスポンシブレイアウト、コンポーネントアーキテクチャを構築するためのCSSカスタムプロパティパターンの包括的なコレクションです — すべてインタラクティブなデモ付きです。
レスポンシブカスタムプロパティ
@mediaでブレークポイントごとに変化するカスタムプロパティは、ユーティリティクラスなしのレスポンシブデザインシステムを作成します。トークンを一度定義すれば、メディアクエリがそれを適応させます。
:root {
--content-padding: 1rem;
}
@media (min-width: 768px) {
:root {
--content-padding: 2rem;
}
}
--content-paddingを参照するすべての要素がブレークポイントで自動的に更新されます — コンポーネントごとのオーバーライドは不要です。
レスポンシブカスタムプロパティ
CSSカウンターとカスタムプロパティ
CSSカウンターは自動番号付けを生成します。カスタムプロパティと組み合わせることで、カウンターのスタイリングを設定可能にします — 親要素から色、サイズ、形状を変更できます。
CSSカウンターとカスタムプロパティ
コンポーネントツリーのカスタムプロパティ継承
親コンポーネントがカスタムプロパティを設定し、深くネストされた子が自動的にそれを継承します — プロップドリリングも追加クラスも不要です。これはコンポーネントテーマの最も強力なパターンの一つです。
カスタムプロパティの継承
calcベースのスペーシングスケール
単一のベーススペーシング単位を定義し、calc()でスケール全体を導出します。ベース値を変更すると、すべてのスペーシングトークンが一度に再構成されます。
:root {
--space-unit: 8px;
--space-xs: calc(var(--space-unit) * 0.5);
--space-sm: var(--space-unit);
--space-md: calc(var(--space-unit) * 2);
--space-lg: calc(var(--space-unit) * 3);
--space-xl: calc(var(--space-unit) * 5);
}
calcベースのスペーシングスケール
カスタムプロパティによるカラーシステム
HSLコンポーネントを個別のカスタムプロパティに分離することで、最大の柔軟性を得られます。1つの色定義からホバー状態、明るい/暗いバリアント、透明度を導出できます。
:root {
--primary-h: 220;
--primary-s: 80%;
--primary-l: 50%;
}
.button {
background: hsl(var(--primary-h) var(--primary-s) var(--primary-l));
}
.button:hover {
background: hsl(var(--primary-h) var(--primary-s) calc(var(--primary-l) - 10%));
}
HSLカラーシステム