カスタムプロパティ「スタック」を使用して、カスケードを飼いならします

CSSカスタムプロパティ：カスケードと継承を制御する新しい方法

1994年のCSSの誕生以来、カスケードと相続は、Webページでの設計方法を定義しています。どちらも強力な機能ですが、開発者として、それらがどのように相互作用するかを非常に制御しています。セレクターの特異性とソースコードの順序は、最小限の「階層的」制御を提供しますが、ニュアンスがありません。現在、CSSカスタムプロパティにより、カスケードと継承を新しい方法で管理および制御できます。

この記事では、カスタムプロパティ「スタック」を使用して、スコープされたコンポーネントスタイルからより明示的な意図階層まで、カスケードのいくつかの一般的な問題を解決する方法を示します。

カスタムプロパティについてすぐに学びます

ブラウザは、ベンダープレフィックス（-webkit-または-moz-など）を使用して新しいプロパティを同じ方法で定義し、「空」（プレフィックス」を使用して独自のカスタムプロパティを定義できます。 SASSやJavaScriptの変数と同様に、それらを使用して値を名前、保存、および取得することができますが、CSSの他のプロパティと同様に、 CSCADINGでDOMで継承されます。

 <code>/* 定义自定义属性*/ html { --brand-color: rebeccapurple; }</code>

これらのキャプチャされた値にアクセスするには、var（）関数を使用します。 2つの部分があります。最初にカスタムプロパティの名前、次にプロパティが定義されていない場合のフォールバック値：

 <code>button { /* 如果可用，则使用--brand-color，否则回退到deeppink */ background: var(--brand-color, deeppink); }</code>

これは、古いブラウザからのサポートフォールバックではありません。ブラウザがカスタムプロパティを理解していない場合、var（）宣言全体を無視します。代わりに、これは、フォントが使用できない場合にフォールバックフォントファミリーを定義するフォントスタックと同様に、未定義の変数を処理する組み込みの方法です。フォールバック値を提供しない場合、デフォルトは設定されていません。

変数「スタック」を構築する

フォールバック値を定義するこの機能は、フォントファミリープロパティで使用される「フォントスタック」に似ています。最初のシリーズが利用できない場合、2番目のシリーズが使用されます。 var（）関数は単一のフォールバック値のみを受け入れますが、var（）関数をネストして、あらゆるサイズのカスタム属性フォールバック「スタック」を作成できます。

 <code>button { /* 尝试Consolas，然后是Menlo，然后是Monaco，最后是monospace */ font-family: Consolas, Menlo, Monaco, monospace; /* 尝试--state，然后是--button-color，然后是--brand-color，最后是deeppink */ background: var(--state, var(--button-color, var(--brand-color, deeppink))); }</code>

スタッキングプロパティ用のネ​​ストされた構文がかさばっているように見える場合は、SASSなどのプリプロセッサを使用してよりコンパクトにすることができます。

フォントスタックや階層的な背景画像など、コンマを含むフォールバック値をサポートするには、単一のフォールバック値制限が必要です。

 <code>html { /* 后备值为"Helvetica, Arial, sans-serif" */ font-family: var(--my-font, Helvetica, Arial, sans-serif); }</code>

「スコープ」を定義する

CSSセレクターを使用すると、特定のネストされたコンテキストのページまたは要素のどこにでもHTML DOMツリーとスタイル要素に飛び込むことができます。

 <code>/* 所有链接*/ a { color: slateblue; } /* section 内的链接*/ section a { color: rebeccapurple; } /* article 内的链接*/ article a { color: deeppink; }</code>

これは便利ですが、「モジュラー」オブジェクト指向またはコンポーネント駆動型スタイルの現実をキャプチャしません。さまざまな構成にネストされている多くの記事と類似物があります。どのコンテキストまたはスコープが重複するときに優先されるべきかを明確にする方法が必要です。

近接範囲

.lightテーマとダークテーマがあるとします。ルート要素でこれらのクラスを使用して、ページ全体のデフォルト値を定義できますが、さまざまな方法でネストされた特定のコンポーネントに適用することもできます。

カラーパターンクラスの1つを適用するたびに、背景と色のプロパティがリセットされ、ネストされたタイトルと段落で継承されます。私たちの主な文脈では、色は.lightクラスから継承され、ネストされたタイトルと段落は.darkクラスから継承されます。継承は直接血統に基づいているため、定義された値を持つ最も近い祖先が優先されます。私たちはそれを近接と呼びます。

近接性は継承にとって重要ですが、特異性に依存するセレクターには影響しません。内側の暗い容器や明るい容器で何かをスタイリングしたい場合、これは問題になります。

ここでは、明るいボタンのバリエーションを定義しようとします。ライトモードのボタンは、白いテキストが付いたRebeccapurpleである必要があります。明るいコンテキストと暗いコンテキストに基づいてボタンを直接選択しますが、これは機能しません。

一部のボタンは両方のコンテキストにあり、.lightと.darkの祖先があります。この場合、私たちが望むのは、最近のトピックに引き継ぐこと（近接動作を継承する）ですが、最初のセレクター（カスケードの動作）を上書きする2番目のセレクターです。これら2つのセレクターは同じ特異性を持っているため、ソースコードの順序が勝者を決定します。

カスタムプロパティと近接性

トピックからこれらのプロパティを継承する方法が必要ですが、ボタンなどの特定の子要素にのみ適用します。カスタムプロパティがこれを可能にします！明るい容器と暗い容器の値を定義できますが、ボタンなどのネストされた要素に継承された値のみを使用できます。

まず、カスタムプロパティを使用するボタンを設定し、それらのプロパティが未定義の場合にフォールバックの「デフォルト」値を使用します。

 <code>button { background: var(--btn-color, rebeccapurple); color: var(--btn-contrast, white); }</code>

これで、これらの値をコンテキストに基づいて設定できます。それらは、近接性と継承に応じて、対応する祖先に範囲を付けます。

 <code>.dark { --btn-color: plum; --btn-contrast: black; } .light { --btn-color: rebeccapurple; --btn-contrast: white; }</code>

追加のボーナスとして、全体のコードを使用するコードが少なく、統一ボタン定義：

これは、ボタンコンポーネントに利用可能なパラメーターを作成するためのAPIだと思います。 Sara SoueidanとLea Verouの両方が、最近の記事でこれを非常によくカバーしています。

コンポーネントの所有権

範囲を定義するには近接性だけでは不十分な場合があります。 JavaScriptフレームワークが「スコープスタイル」を生成すると、特定のオブジェクト要素の所有権を確立しています。タブレイアウトコンポーネントにはタブ自体がありますが、各タブの背後にコンテンツがありません。これは、BEMコンベンションが複雑な.block__elementクラス名でキャプチャしようとするものでもあります。

ニコール・サリバンは、この問題について議論するために、2011年に「ドーナツスコープ」という用語を作り出しました。彼女はこの問題についてのアイデアを更新したと思いますが、根本的な問題は変わっていません。セレクターと特異性は、幅広いパターンの上に詳細なスタイルを構築する方法を説明するのに最適ですが、所有権の明確な感覚を伝えません。

この問題を解決するために、カスタムプロパティスタックを使用できます。最初に、デフォルトの色に使用される要素に「グローバル」プロパティを作成します。

 <code>html { --background--global: white; --color--global: black; --btn-color--global: rebeccapurple; --btn-contrast--global: white; }</code>

これで、参照したい場所ならどこでも使用できます。 Data-Themeプロパティを使用して、前景と背景の色を適用します。グローバルな値がデフォルトのフォールバック値を提供することを望んでいますが、特定のトピックでそれを上書きするオプションも望んでいます。これは、「スタック」が登場する場所です。

 <code>[data-theme] { /* 如果没有组件值，则使用全局值*/ background: var(--background--component, var(--background--global)); color: var(--color--component, var(--color--global)); }</code>

これで、 * - コンポーネントプロパティをグローバルプロパティの逆に設定することにより、逆コンポーネントを定義できます。

 <code>[data-theme='invert'] { --background--component: var(--color--global); --color--component: var(--background--global); }</code>

しかし、これらの設定が所有権ドーナツから継承することを望んでいないため、これらの値を各トピックの初期（未定義）にリセットします。各トピックがオーバーライドできるデフォルト値を提供するように、より低い特異性または以前のソースコード順序でこれを行う必要があります。

 <code>[data-theme] { --background--component: initial; --color--component: initial; }</code>

最初のキーワードは、カスタムプロパティに使用される場合に特別な意味を持ち、保証された無値状態に戻します。これは、背景を設定するために渡されないことを意味します。初期または色：初期、カスタムプロパティは未定義になり、スタックの次の値、つまりグローバル設定に戻ります。

ボタンでも同じことをしてから、各コンポーネントにデータテーマが適用されることを確認できます。特定のトピックが与えられない場合、各コンポーネントはデフォルトのグローバルトピックになります。

「ソース」を定義する

CSSカスケードは、同じプロパティで複数の値を定義するときに優先されるべき値を決定するために使用される一連のフィルタリングレイヤーです。ほとんどの場合、特定のレイヤー、またはソースコードシーケンスに基づいた最終的な階層と相互作用しますが、カスケードの最初のレイヤーはスタイルの「ソース」です。ソースは、スタイルのソース（通常、ブラウザ（デフォルト）、ユーザー（優先）、または著者（US））を説明しています。

デフォルトでは、著者スタイルはユーザーの好みをオーバーライドし、ユーザーの好みはブラウザのデフォルトをオーバーライドします。これは、誰もが適用されると変化します!importantあり、ソースが逆になります。ブラウザ!importantスタイルは最も高いソースを持ち、次に重要なユーザーの好みを持ち、次に著者の重要なスタイル、何よりも通常のレイヤーよりも重要です。他にもいくつかの情報源がありますが、ここでは詳しく説明しません。

カスタムプロパティ「スタック」を作成すると、非常によく似た動作を構築しています。既存のソースをカスタムプロパティスタックとして表現したい場合は、次のようになります。

 <code>.origins-as-custom-properties { color: var(--browser-important, var(--user-important, var(--author-important, var(--author, var(--user, var(--browser)))))); }</code>

これらのレイヤーはすでに存在するため、それらを再現する理由はありません。しかし、上記の「グローバル」スタイルと「コンポーネント」スタイルを重ねると、「グローバル」レイヤーを上書きする「コンポーネント」ソースレイヤーを作成します。同じ方法を使用して、CSSのさまざまな階層的な問題を解決することができます。これは、特異性を常に説明することはできません。

• オーバーライド»コンポーネント»テーマ»デフォルト値
• トピック»システムまたはフレームワークを設計します
• ステータス»タイプ»デフォルト値

いくつかのボタンを見てみましょう。デフォルトのボタンスタイル、障害のある状態、および危険、プライマリ、セカンダリなどのさまざまなボタン「タイプ」が必要です。障害状態に常にタイプバリアントをオーバーライドすることを望んでいますが、セレクターはこの違いをキャプチャできません。

ただし、優先順位を付けたい順序で「タイプ」レイヤーと「状態」レイヤーを提供するスタックを定義できます。

 <code>button { background: var(--btn-state, var(--btn-type, var(--btn-default))); }</code>

さて、2つの変数を設定すると、状態は常に優先されます。

レイヤー化に基づいてカスタムテーマ設定を可能にするこの手法を使用して、カスケードカラーフレームワークを作成しました。

• HTMLの事前定義されたトピックプロパティ
• ユーザーの色の好み
• 明るいモードと暗いモード
• グローバルテーマのデフォルト

ミックスしてマッチします

これらの方法は極端になる可能性がありますが、ほとんどの毎日のユースケースは、通常上記の手法を使用して、スタック内の2つまたは3つの値を使用して処理できます。

• レイヤーの変数スタックを定義します
• 継承は、近接性と範囲に基づいてそれらを設定します
• 初期値を注意深く適用して、ネストされた要素をスコープから削除します

Oddbirdプロジェクトでこれらのカスタムプロパティ「スタック」を使用しています。私たちはまだ模索していますが、セレクターと特異性だけで解決するのが難しい問題を解決するのに役立ちました。カスタムプロパティでは、カスケードや継承と戦う必要はありません。予想どおりにそれらをキャプチャして利用することができ、各インスタンスでそれらがどのように適用されるかをよりよく制御できます。私にとって、これはCSSにとって大きな勝利です。特に、スタイルフレームワーク、ツール、システムを開発する場合です。

以上がカスタムプロパティ「スタック」を使用して、カスケードを飼いならしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。