CSSの変数をインラインで使用した条件付きCSS、コードを減らしながらもバリエーションを作成するCSSのテクニック

サイト構築 -CSS

Post on:2024年8月5日

sponsorsr

CSS変数を使用して、コードを減らしながらもUI要素やコンポーネントのバリエーションを作成するCSSのテクニックを紹介します。

CSSはclassを使用すると、個別の値のみをターゲットにスタイルを適用できます。CSS変数を使用すると、連続した値の範囲をカバーでき、特定のトークンを使用して特定のスタイルを適用できるようになります。

CSS変数（カスタムプロパティ）について詳しくは、下記をご覧ください。

CSSの変数（カスタムプロパティ）の基礎知識、便利な使い方を詳しく解説

HTMLは、buttonにclassとstyleを与えます。ポイントとなるのは、styleにインラインでCSS変数を設定することです。

<button class="btn">button</button>
<button class="btn" style="--size: md;">button</button>
<button class="btn" style="--size: sm;">button</button>

<button class="btn">button</button>

<button class="btn" style="--size: md;">button</button>

<button class="btn" style="--size: sm;">button</button>

CSSは、下記の通り。
--size: mdは少し大きいボタン、--size: smは少し小さいボタンです。

<style>
.btn{
  font-size: 0.875rem;
  height: 2.5rem;
  padding: 0 1rem;
}
.btn[style*="--size: md"],
.btn[style*="--size:md"]{
  font-size: 1rem;
  height: 3rem;
  padding: 0 1.25rem;
}
.btn[style*="--size: sm"],
.btn[style*="--size:sm"]{
  font-size: 1rem;
  height: 2rem;
  padding: 0 0.75rem;
}
</style>

<style>

.btn{

font-size: 0.875rem;

height: 2.5rem;

padding: 0 1rem;

}

.btn[style*="--size: md"],

.btn[style*="--size:md"]{

font-size: 1rem;

height: 3rem;

padding: 0 1.25rem;

}

.btn[style*="--size: sm"],

.btn[style*="--size:sm"]{

font-size: 1rem;

height: 2rem;

padding: 0 0.75rem;

}

</style>

このCSSを見て、疑問を浮かべるかもしれません。

セレクタを,区切りで繰り返してるのはなぜ？
styleじゃなくて、classでスタイルを与えればいいのでは？

,区切りの2つセレクタ（--size: md, --size:md）は、同じことを繰り返しているように見えるかもしれませんが、:と値の間にスペースを入れると入れない場合を想定したものです。この2つを用意しておくことで、CSS変数をインラインで定義する場合にスペース有りと無しの両方をターゲットにします。

classでスタイルを与えればいいのでは？は、確かにclassで与えることもできます。しかしこのCSSを使用すると、変数の値またはトークン（md）のいずれかを使用して、コンポーネントのスタイルを更新することができます。これによりCSSが削減され（複数のケースに対して1つのツール）、トークンを使用するときに複数のCSSのプロパティを変更できます。たとえば、テキストコンポーネント内にオーバーフローのアイテムを作成するには、下記のようになります。

:where(.cd-text) *[style*="--cd-overflow:"] {
  --cd-w: calc(100% + calc(var(--cd-overflow) * 2));
  margin-left: calc(var(--cd-overflow) * -1);
}

:where(.cd-text) *[style*="--cd-overflow:full"].
:where(.cd-text) *[style*="--cd-overflow: full"] {
  --cd-w: 100vw;
  margin-left: calc(50% - 50vw);
}

:where(.cd-text) *[style*="--cd-overflow;"] img {
  width: 100%;
  max-width: none;
}