CSSの変数をインラインで使用した条件付きCSS、コードを減らしながらもバリエーションを作成するCSSのテクニック
Post on:2024年8月5日
CSS変数を使用して、コードを減らしながらもUI要素やコンポーネントのバリエーションを作成するCSSのテクニックを紹介します。
CSSはclassを使用すると、個別の値のみをターゲットにスタイルを適用できます。CSS変数を使用すると、連続した値の範囲をカバーでき、特定のトークンを使用して特定のスタイルを適用できるようになります。
![CSSの変数をインラインで使用した条件付きCSS](http://coliss.com/wp-content/uploads-202403/2024070601@2x.png)
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