CSSパターンとして紹介されていたCSS変数（カスタムプロパティ）の宣言とフォールバックについてです。
37signals Dev — Modern CSS patterns in Campfire
Custom Properties > Declared vs. Fallback values
ボタンについて紹介されていたので、buttons.css から要素色（–btn-color）と背景色（–btn-background）の箇所を抜き出しました。フォールバックするテキストの色を日本語に置き換えています。
.btn {
background-color: var(--btn-background, var(テキスト黒色));
color: var(--btn-color, var(テキスト白色));
&:has(input:checked) {
--btn-background: var(テキスト白色);
--btn-color: var(テキスト黒色);
}
}
.btn--reversed {
--btn-background: var(テキスト白色);
--btn-color: var(テキスト黒色);
}
.btn--negative {
--btn-background: var(赤色);
--btn-color: var(テキスト黒色);
}
.btn--plain {
--btn-background: transparent;
}
–btn-background と -btn-color はライトまたはダークモードに合わせた色を設定しています。.btn ではこれらの値が未定義ならデフォルト値を設定します。
.btn–reversed では要素の色と背景色を入れ替えて再定義しています。
.btn–negative と .btn–plain も色の再定義が分かりやすいですね。
日本語の部分はダークモードで違和感を感じないように、実際には次のように定義しています。こういった名前の付け方も勉強になります。
テキスト黒色 –color-text
テキスト白色 –color-text-reversed
以上です。
▼この記事がいいね！と思ったらブックマークお願いします
