CSSの変数をインラインで使用した条件付きCSS、コードを減らしながらもバリエーションを作成するCSSのテクニック
Post on:2024年8月5日
sponsors
CSS変数を使用して、コードを減らしながらもUI要素やコンポーネントのバリエーションを作成するCSSのテクニックを紹介します。
CSSはclassを使用すると、個別の値のみをターゲットにスタイルを適用できます。CSS変数を使用すると、連続した値の範囲をカバーでき、特定のトークンを使用して特定のスタイルを適用できるようになります。
CSS変数（カスタムプロパティ）について詳しくは、下記をご覧ください。
HTMLは、buttonにclassとstyleを与えます。ポイントとなるのは、styleにインラインでCSS変数を設定することです。
|
1 2 3 |
<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は少し小さいボタンです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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のプロパティを変更できます。たとえば、テキストコンポーネント内にオーバーフローのアイテムを作成するには、下記のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
: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; } |
実際の動作は、デモページをご覧ください。
See the Pen
Conditional CSS using inline variables by coliss (@coliss)
on CodePen.
元ネタは、下記ポストより。
Conditional CSS using inline variables ↓ pic.twitter.com/O5oCRU8kfT
— Claudia Romano (@romano_cla) July 4, 2024
sponsors
