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

CSS変数を使用して、コードを減らしながらもUI要素やコンポーネントのバリエーションを作成するCSSのテクニックを紹介します。 CSSはclassを使用すると、個別の値のみをターゲットにスタイルを適用できます。CSS変数を使用すると、連続した値の範囲をカバーでき、特定のトークンを使用して特定のスタイルを適用できるようになります。 CSS変数（カスタムプロパティ）について詳しくは、下記をご覧ください。 CSSの変数（カスタムプロパティ）の基礎知識、便利な使い方を詳しく解説 HTMLは、buttonにclassとstyleを与えます。ポイントとなるのは、styleにインラインでCSS変数を設定することです。

[coliss]

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

[strawberryhunter]

ちょっと考えてみたけど何が良いのか理解できなかった。短くもなってないし。.btn.md .btm.sm より優れている理由ってあるの？

[poad1010]

この記事をおすすめしました

[mayumayu_nimolove]

tailwindかpureで良い。CSSより他のことに専念できるようになる。

[tsuki-rs]

classと何が違うん？別にclassでよくね？