CSSカスケード層を使用した設計システムコンポーネントパターンを整理します

この記事では、CSSカスケード層を使用して、カスタマイズ可能性、効率、使いやすさ、コンポーネントの理解の容易さを改善する方法について説明します。

私はコード組織に情熱を傾けており、カスケードはカスケードの読み取り順序に直接従うため、コードを明示的に整理する優れた方法であることがわかります。さらに良いことに、「トップレベルの」組織を支援することに加えて、カスケードもネストすることができ、カスケードに基づいてより正確なスタイルを書くことができます。

唯一の欠点はあなたの想像力です。私たちがCSSを過剰に設定することを止めることはできません。明確にするために、私が見せようとしているのは過剰設計だと思うでしょう。しかし、私はバランスポイントを見つけ、シンプルで整理されたままにしてくれたと思います。そして、私の発見を喜んで共有しています。

CSSコンポーネントモードの構成

CSSを使用してコンポーネントを作成するパターンを調査するための例としてボタンを使用しましょう。ボタンは、ほぼすべてのコンポーネントライブラリで最も人気のあるコンポーネントの1つです。次のようなさまざまなユースケースでボタンを使用できるため、この人気の理由があります。

引き出し

などのアクションを実行します
• UIのさまざまな部分に移動し、
• フォーカスやホバーなどの状態を維持します。
そして、ボタンには、

、

、<button></button>などのさまざまなマーキングフォームがあります。あなたが信じているなら、ボタンを作る方法はさらにあります。 input[type="button"] <a></a>最も重要なことは、異なるボタンが異なる関数を実行し、通常、1つの操作のボタンが別の操作のボタンと区別されるように、それに応じてスタイルとなっていることです。ボタンは、ホバリング、移動、焦点など、状態の変更にも応答します。 BEM構文を使用してCSSを作成したことがある場合は、カスケード層のコンテキストで同様のアイデアに沿って考えることができます。

わかりました、今すぐコードを書きましょう。具体的には、いくつかの異なるタイプのボタンを作成しましょう。ボタンとして設定したい要素に設定できるクラスから始めます！ボタンにはさまざまなタグ形式があることはすでにわかっているため、一般的な

クラスは、これらのボタンの1つまたはすべてを選択するための最も再利用可能で拡張可能な方法です。

<code>.button {}
.button-primary {}
.button-secondary {}
.button-warning {}
/* etc. */</code>

.buttonCascades .buttonを使用しています

ここでは、最初のカスケード層を挿入できます！最初にカスケードレイヤーが必要な理由は、スタイルを評価するときにCSSカスケードの読み取り順序を設定できることです。 CSSに最初に1つの層を評価し、次に別のレイヤー、次に別のレイヤーを評価するように指示できます。これは、ブラウザが「Win」に適用するスタイルを制御するための超大国を提供する信じられないほどの機能です。

<code>.button {
  /* 所有按钮的通用样式 */
}</code>

ボタンがコンポーネントであるため、このレイヤーに名前を付けます。私が名前を気に入っているのは、設計システムを拡張することを決定するときに将来追加する他のコンポーネントをサポートするのに十分なほど一般的であるためです。コンポーネントに固有のものではないかもしれない将来書いている他のスタイルからの懸念の適切な分離を維持しながら、それは私たちと一緒に拡大します。 components

<code>.button {}
.button-primary {}
.button-secondary {}
.button-warning {}
/* etc. */</code>

ネストされたカスケード

物事が少し奇妙になる場所はここにあります。クラスの内部にカスケード層をネストできることをご存知ですか

？これは完全なことです。したがって、これを見ると、すでに独自のレイヤー内にあるクラスの内部に新しいレイヤーを導入できます。これが私が意味することです： .button最終的には、これがブラウザが内側のレイヤーを解釈する方法です：

この投稿はネストされたスタイルだけではないので、私はあなたがそれをするときにあなたの走行距離が異なるかもしれないと言いたいだけです。 Nested Styleの使用に関するAndy Bellの最近の記事をご覧ください。

<code>.button {
  /* 所有按钮的通用样式 */
}</code>

スタイル構造

<code>/* 组件顶级层 */
@layer components {
  .button {
    /* 所有按钮的通用样式 */
  }
}</code>

これまでのところ、設計システムのあらゆる種類のコンポーネントに対応するように設計されたカスケード層内に

クラスを確立しました。この内部には、タグで遭遇する可能性のあるさまざまな種類のボタンを選択するために使用される別のカスケードレイヤーがあります。前に説明しましたが、ボタンは

、

、または

であることを説明しました。これは、各タイプのスタイルを個別にスタイリングする方法です。

.button .button<button></button>がa <input> an<a></a>要素である場合、これらのスタイルが適用されます。」と言うことに似ています。

デフォルトのボタンスタイルを定義します:is() .buttonすべてのボタンに合わせて機能するユニバーサルスタイルでコードを埋めます。これらのスタイルは要素レイヤーの上部にあるため、マーキングに関係なく、すべてのボタンに適用されます。デフォルトのボタンスタイルと見なすことができます。 <a></a>ボタンステータススタイルを定義します

<code>/* 组件顶级层 */
@layer components {

  .button {
    /* 组件元素层 */
    @layer elements {
      /* 样式 */
    }
  }
}</code>

デフォルトボタンを使用して対話する場合、ユーザーは何をすべきですか？これらは、ユーザーがユーザーと対話するときにボタンが取る可能性のあるさまざまな状態であり、それに応じてスタイルをスタイリングする必要があります。

「states」（状態）と呼ばれる要素の崇拝者の真下に新しいカスケード付きサブレイヤーを作成します。

一時停止して、ここで考えてみてください。どの州をターゲットにする必要がありますか？これらの各州について何を変えたいですか？

<code>@layer components {
  @layer elements {
    .button {
      /* 按钮样式... */
    }
  }
}</code>

一部の状態は、同じ背景色で:hoverや:focusなどの同様のプロパティの変更を共有する場合があります。幸いなことに、CSSは、状態に基づいてプロパティの変更をグループ化するために:where()関数を使用して、そのような問題を解決するためのツールを提供します。なぜ:where()の代わりに:is()を使用するのですか？ :where()の特異性はゼロです。つまり、よりもカバーする方が簡単で、そのパラメーターで特異性スコアが最も高い要素の特異性を取得します。特異性を低く保つことは、スケーラブルで保守可能なCSSを書くときの美徳です。 :is() :is()

しかし、ボタンのスタイルを意味のある方法でどのように更新するのでしょうか？つまり、ボタンがホバーまたはフォーカスのように見えるようにするにはどうすればよいですか？新しい背景色を追加する必要がありますが、理想的には、色は要素レイヤーの

<code>.button {}
.button-primary {}
.button-secondary {}
.button-warning {}
/* etc. */</code>

セットに関連する必要があります。

それでは、少しリファクタリングしましょう。以前は、要素のに設定しました。色を再利用したいので、CSS変数に変換して、すぐに更新してどこにでも適用できるようにする方が良いでしょう。変数に依存することは、スケーラブルで保守可能なCSSを書き込むことのもう1つの利点です。 background-color

と呼ばれる新しい変数を作成します。これは最初に.buttonに設定され、次にデフォルトのボタンスタイルに設定します。 background-color darkslateblue変数に色を保存したので、同じ変数をホバーに設定し、他のレイヤーのボタンの状態を焦点を合わせて、ボタンがホバリングまたは集中しているときに、比較的新しい関数を使用して

を軽い色に変換できます。

--button-background-color状態層に戻りましょう！まず、darkslateblue：

と呼ばれる新しいCSS変数に色をブレンドします

<code>.button {
  /* 所有按钮的通用样式 */
}</code>

color-mix()属性を更新することにより、その色を適用できます。 darkslateblue

変更されたボタンスタイルを定義します--state-background-color

要素と状態層に加えて、修飾子などのコンポーネントのいくつかのタイプの変更を探している場合があります。これは、すべてのボタンがデフォルトボタンのようになるわけではないためです。ユーザーが意思決定を確認できるように、緑の背景色のボタンが必要です。または、クリックしたときに危険を示す赤いボタンが必要な場合があります。そのため、既存のデフォルトボタンスタイルを使用して、これらの特定のユースケースのために変更できます。

<code>/* 组件顶级层 */
@layer components {
  .button {
    /* 所有按钮的通用样式 */
  }
}</code>

常に上から下に流れるカスケードの順序を考慮した場合、修正されたスタイルが今後の状態層のスタイルに影響を与えたくありません。それでは、要素と状態の間に新しいモディファイアレイヤーを追加しましょう。 background-color

状態の処理方法と同様に、各ボタンモディファイアの

<code>/* 组件顶级层 */
@layer components {

  .button {
    /* 组件元素层 */
    @layer elements {
      /* 样式 */
    }
  }
}</code>

変数を更新できるようになりました。もちろん、スタイルをさらに変更できますが、このシステムがどのように機能するかを示すのはかなり簡単に保ちます。

デフォルトのボタンをbackground-colorからdarkslateblueに変更する新しいクラスを作成します。繰り返しますが、この場合は特異性を向上させる必要があるため、darkgreenセレクターに頼ることができます。これにより、モディファイアクラスでデフォルトのボタンスタイルをオーバーライドできます。このクラスを呼び出します:is()（緑は「成功」の色です）を.success：:is()に提供します

<code>.button {}
.button-primary {}
.button-secondary {}
.button-warning {}
/* etc. */</code>

ボタンの1つに

クラスを追加すると、まさに.successの代わりにdarkgreenになります。これはまさに私たちが望むものです。状態層でいくつかのdarkslateblue操作を行っているため、これらのホバースタイルとフォーカススタイルを自動的に継承します。つまり、これらの状態でcolor-mix()が浅くなります。 darkgreen

すべてを一緒に統合します

<code>.button {
  /* 所有按钮的通用样式 */
}</code>

CSSカスタム属性に変更する必要があるCSS属性をリファクタリングできます。これにより、多くのカスタマイズスペースが提供されます。

注意：デモを詳しく見て、

<code>/* 组件顶级层 */
@layer components {
  .button {
    /* 所有按钮的通用样式 */
  }
}</code>

を使用してボタンの背景を調整した方法を確認し、Sara Joyの「Light-Dark（）SideにCome」を読んで、それがどのように機能するかを完全に把握してください！

light-dark()どう思いますか？あなたのスタイルを整理するためにそれを使用しますか？コンポーネントが少ない小さなプロジェクトの場合、カスケードシステムの作成は過度に行われる可能性があります。しかし、私たちが今したように少し試しても、CSSカスケードの管理、または飼いならしさえしていることを示すことができます。ボタンは一見複雑ですが、デフォルトのスタイルから状態バージョンや修正バージョンの作成まで、スタイルを処理するために必要なスタイルの数がわかります。

以上がCSSカスケード層を使用した設計システムコンポーネントパターンを整理しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。