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

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

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

CSSコンポーネントモードの構(gòu)成

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

引き出し

などのアクションを?qū)g行します
• UIのさまざまな部分に移動し、
• フォーカスやホバーなどの狀態(tài)を維持します。
そして、ボタンには、

、

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

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

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

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

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

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

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

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

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

ネストされたカスケード

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

？これは完全なことです。したがって、これを見ると、すでに獨自のレイヤー內(nèi)にあるクラスの內(nèi)部に新しいレイヤーを?qū)毪扦蓼?。これが私が意味することです?em> .button最終的には、これがブラウザが內(nèi)側(cè)のレイヤーを解釈する方法です：

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

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

スタイル構(gòu)造

<code>/* 組件頂級層 */
@layer components {
  .button {
    /* 所有按鈕的通用樣式 */
  }
}</code>

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

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

、

、または

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

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

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

<code>/* 組件頂級層 */
@layer components {

  .button {
    /* 組件元素層 */
    @layer elements {
      /* 樣式 */
    }
  }
}</code>

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

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

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

<code>@layer components {
  @layer elements {
    .button {
      /* 按鈕樣式... */
    }
  }
}</code>

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

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

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

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

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

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

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

--button-background-color狀態(tài)層に戻りましょう！まず、darkslateblue：

と呼ばれる新しいCSS変數(shù)に色をブレンドします

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

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

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

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

<code>/* 組件頂級層 */
@layer components {
  .button {
    /* 所有按鈕的通用樣式 */
  }
}</code>

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

狀態(tài)の処理方法と同様に、各ボタンモディファイアの

<code>/* 組件頂級層 */
@layer components {

  .button {
    /* 組件元素層 */
    @layer elements {
      /* 樣式 */
    }
  }
}</code>

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

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

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

ボタンの1つに

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

すべてを一緒に統(tǒng)合します

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

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

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

<code>/* 組件頂級層 */
@layer components {
  .button {
    /* 所有按鈕的通用樣式 */
  }
}</code>

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

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

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