高速で簡単なデザインバリエーションのためのCSS変数の使用

CSSの変数を使用すると、プレーンバニラCSSを使用してデザインの決定を維持する方が良いと簡単にすることができます.
次のコードは、カスタムのカスタムボタンコンポーネントを使用するが、これはCSS変数
インデックスをオフにします.以下のスタイルを定義します

html {
  --s: .5rem;
  --m: 1rem;
  --l: 1.5rem;
  --xl: 2rem;
  --xxl: 2.5rem;
  --xxxl: 3rem;
  --primary-background: #f0f0f0;
  --main-color: 230;

  box-sizing: border-box;
  font-size: 16px;
  margin: 0;
  padding: 0 2rem;
  background-color: var(--primary-background);
}

button + button {
  margin-left: var(--m);
}

年代に宣言されたスタイルhtml 要素は、CSSのリセットの一部であり、いくつかの変数を定義する一部は、アプリケーション全体を使用します.The rem 変数はフォーカスではありませんが、特定の要素をサイズ変更する便利なシステムです.
The button + button 2つのボタンが並んで配置されている場合、行は2番目のボタンに左マージンを適用します.
私のボタンコンポーネントはシンプルで最小です

import React from "react";
import "../styles/Button.css";

function Button({ text, type }) {
  return (
    <button className={type}>
      {text}
    </button>
  );
}

export default Button;

ここでは、いくつかのカスタムスタイルをインポートし、支柱を使用して追加type ボタン要素のクラスとして追加されます.
The ../styles/Button.css このコンポーネントのモジュールは以下の通りです.

button {
    --main-color: 230;
    --border-size: 1.5px;
    --saturation: 80%;
    --lightness: 55%;

    border-radius: var(--s);
    padding: var(--s) var(--xl);
    font-weight: 800;
    font-size: var(--m);
    margin: .5rem;
    min-width: 10rem;
}

.alert {
    --main-color: 360;
}

.confirm {
    --main-color: 150;
    --saturation: 90%;
    --lightness: 40%;
}

.info {
    --main-color: 190;
    --saturation: 85%;
    --lightness: 50%;
}

.primary {
    background-color: hsl(var(--main-color), var(--saturation), var(--lightness));
    color: var(--primary-background);
    border: var(--border-size) solid hsl(var(--main-color), var(--saturation), var(--lightness));
}

.secondary {
    background-color: var(--primary-background);
    color: hsl(var(--main-color), var(--saturation), var(--lightness));
    border: var(--border-size) solid hsl(var(--main-color), var(--saturation), var(--lightness));
    font-weight: 700;
}

最後に、私のアプリケーションコンポーネント

import React from "react";
import Button from "./components/Button.jsx";

function App() {
  return (
    <>
      <div>
        <Button text="Submit" type="primary" />
        <Button text="Cancel" type="secondary" />
      </div>
      <div>
        <Button text="Delete" type="primary alert" />
        <Button text="Cancel" type="secondary alert" />
      </div>
      <div>
        <Button text="Accept" type="primary confirm" />
        <Button text="Cancel" type="secondary confirm" />
      </div>
      <div>
        <Button text="OK!" type="primary info" />
        <Button text="More Info" type="secondary info" />
      </div>
    </>
  );
}

export default App;

これは以下の8つのボタンをブラウザでレンダリングします.

見て、ここで起こっていることを解いてみましょう.
アプリのコンポーネントで再び私たちの最初の4つのボタンを見て

[...]
      <div>
        <Button text="Submit" type="primary" />
        <Button text="Cancel" type="secondary" />
      </div>
      <div>
        <Button text="Delete" type="primary alert" />
        <Button text="Cancel" type="secondary alert" />
      </div>
[...]

ボタンのコンポーネントの主なバリエーションとして' primary 'と' second 'を通過していることがわかります.下の2つのボタンでは、我々は追加のクラスでは、';警告';を通過している.
ボタンコンポーネントのCSSのいくつかは、次のようになります.

button {
    --main-color: 230;
    --border-size: 1.5px;
    --saturation: 80%;
    --lightness: 55%;

    border-radius: var(--s);
    padding: var(--s) var(--xl);
    font-weight: 800;
    font-size: var(--m);
    margin: .5rem;
    min-width: 10rem;
}

.alert {
    --main-color: 360;
}

[...]

.primary {
    background-color: hsl(var(--main-color), var(--saturation), var(--lightness));
    color: var(--primary-background);
    border: var(--border-size) solid hsl(var(--main-color), var(--saturation), var(--lightness));
}

.secondary {
    background-color: var(--primary-background);
    color: hsl(var(--main-color), var(--saturation), var(--lightness));
    border: var(--border-size) solid hsl(var(--main-color), var(--saturation), var(--lightness));
    font-weight: 700;
}

私たちは、プライマリとセカンダリボタンの背景とテキストの色の反転カラースキームを使用して、それらの色を定義するために我々のCSSの変数を使用して.
ここの興味ある部分は具体的には.alert 再定義するクラス--main-color 変数を別の値にします.ボタンのコンポーネントに'警告'クラスを添付すると、簡単にメンテナンス可能な方法でその色を変更します.
我々は、我々のアプリケーションで使用したい他のバリエーションと同じことを行うことができます.他のクラスでは値を変更し、新しい色を適用します.

.confirm {
    --main-color: 150;
    --saturation: 90%;
    --lightness: 40%;
}

.info {
    --main-color: 190;
    --saturation: 85%;
    --lightness: 50%;
}

これらは他の4つのボタンに簡単に適用されます.

[...]
      <div>
        <Button text="Accept" type="primary confirm" />
        <Button text="Cancel" type="secondary confirm" />
      </div>
      <div>
        <Button text="OK!" type="primary info" />
        <Button text="More Info" type="secondary info" />
      </div>
[...]

より多くのバリエーションを追加するか、色を変更する私たちのボタンの単一の値を変更するように簡単です.CSSモジュール.
私が変えたいならばinfo クラスは別の色に、私はCSS.info :

.info {
    --main-color: 270; // Value changed from 190 to 270
    --saturation: 85%;
    --lightness: 50%;
}

以前、私info クラスボタンは次のようになります.

そして、単一の値の変更では、次のようになります.

CSS変数を使用すると、自分のインターフェイスをデザインするときに見られる問題について多くの良い解決策が開きます.