さまざまな程度のカスタムプロパティ使用

カスタムプロパティを使用する1つの方法は、それらを設計トークン、色、間隔、フォントなどと考えることです。ページのルートに設定して、CSS全体で使用できます。カスタムプロパティだけでなく、プリプロセッサ変数の古典的なユースケース、非常に有用で過去100万年にわたって。

使用する別の方法（デザイントークンメソッドと組み合わせて使用​​できます）は、特定の要素の主要なユニークなスタイルの選択に対してより徹底的に使用することです。

このようなカードがあるとします（デモンストレーションのために簡素化されています）：

 <code>.card { background: hsl(200deg 15% 73%); border: 4px solid rgb(255 255 255 / 0.5); padding: 2rem; border-radius: 8px; } .card > h2 { margin: 0 0 1rem 0; border-bottom: 3px solid rgba(0 0 0 / 0.2); }</code>

とても良い。

ただし、必然的にカードのバリエーションを作成する場合、これらのルールセットを自分でオーバーライドする必要があります。 CSSカスタム属性メソッドは次のようになります。

 <code>.card { --card-background: hsl(200deg 15% 73%); --card-border: 4px solid rgb(255 255 255 / 0.5); --card-padding: 2rem; --card-border-radius: 8px; --card-title-margin: 0 0 1rem 0; --card-title-border: 3px solid rgba(0 0 0 / 0.2); background: var(--card-background); border: var(--card-border); padding: var(--card-padding); border-radius: var(--card-border-radius); } .card > h2 { margin: var(--card-title-margin); border-bottom: var(--card-title-border); }</code>

現時点では、もう少し長いですが、バリエーションを作りたいときに何が起こるかを見てください。

 <code>.card-variation { --card-background: purple; --card-padding-block: 2.5rem; --card-title-margin: 0 0 2rem 0; }</code>

ここに3つの明らかな利点があります。

• 明示的に変更された値を変更した値のみを変更しました。私のメインカードのプロトタイプは、私がそれを維持したい整合性を維持しています。
• これらのセレクターを正しく書き換えることなく、バリアントの子要素をスタイリングできます。
• これで、HTMLのスタイル属性からスタイルオーバーライドに合格することができ、1回限りのバリアントを得ることができます。

フォールバックを使用して冗長性を減らします

上部にカスタムプロパティを宣言してから以下で使用する代わりに、このように同時にそれを行うことができます。

 <code>.card { background: var(--card-background, hsl(200deg 15% 73%)); border: var(--card-border, 4px solid rgb(255 255 255 / 0.5)); padding: var(--card-padding, 2rem); border-radius: var(--card-border-radius, 8px); } .card > h2 { margin: var(--card-title-margin, 0 0 1rem 0); border-bottom: var(--card-title-border, 3px solid rgba(0 0 0 / 0.2)); }</code>

これで、-card-backgroundのようなプロパティが設定されている場合、ここでフォールバック値をオーバーライドします。 .cardの上の要素がそれを上書きできることを意味するので、私はこれがあまり好きではありません。これはあなたが望むものかもしれませんが、これは最初の.cardレベルで値を宣言することとまったく同じではありません。ここには強い意見はありません。

さらなる分解

ここでの例は、パディングを個別に制御することをお勧めします。

 <code>.card { --card-padding-block: 2rem; --card-padding-inline: 2rem; --card-padding: var(--card-padding-block) var(--card-padding-inline); padding: var(--card-padding); }</code>

今、私が望むなら、バリアントはパディングの一部のみを制御できます：

 <code>.card-variation { --card-padding-inline: 3rem; }</code>

しかし、あなたは大きな問題に注意する必要があります。これは、これらすべてをルートで宣言した場合、これらのネストされた特性が解析されているため、これは機能しないことを意味します。しかし、最初に.cardで宣言されている限り、ここでは大丈夫でしょう。

それをやり直しますか？

値の各部分を非常に集計的に制御する必要があるとします。例えば：

 <code>html { --color-1-h: 200deg; --color-1-s: 15%; --color-1-l: 73%; --color-1-hsl: var(--color-1-h) var(--color-1-s) var(--color-1-l); --color-1: hsl(var(--color-1-hsl)); }</code>

少し賢いですが、多すぎるかもしれません。色はほぼ確実に根で宣言され、変更されていないため、この大きな問題により、低レベルのサブプロパティを上書きすることが不可能になります。また、-color-1を持っている場合、おそらく2〜9（またはそれ以上）があります。これは、色システムが単純な色の部分の数学よりもはるかに洗練されているため、素晴らしいことです。

成果物設計システム？

Tailwindが非常に人気があることは間違いありません。これは、多数のHTMLクラスがプロパティを個別に制御する原子法を使用します。人気がある理由の一部は、これらの事前に設定されたクラスから選択した場合、デザインがかなり良いことだと思います。軌道に乗ることはできません。見た目を良くするように設計された一連の有限値から選択します。

カスタムプロパティに基づくスタイルメソッドがまったく同じであるとは言いません。たとえば、HTML要素に直接スタイルを適用する代わりに、クラス名の抽象化を検討する必要があります。ただし、Tailwindやその他の原子クラスの方法と同じ制約/制限の一部を享受する場合があります。事前定義された-pacing-x値、 - color-x値、 - font-x値からのみ選択できる場合、これまで以上にまとまりのあるデザインを実現できます。

個人的には、カスタムプロパティにもっと依存する設計システムに向かって移動するのは良いと感じています。

サードパーティの設計システムは、Willで使用できるカスタムプロパティの大規模なセットとして提供する機能をどのように受け取りますか？

サードパーティの成果物は、このようなすべてを含める必要さえありません。たとえば、Adam ArgyleのTransition.Styleは、単に変換アニメーションヘルパーのカスタムプロパティである「ハックパック」を提供します。

理解可能性コスト

カスタムプロパティに対するこのより包括的なアプローチに対して私が聞いた1つの議論は、初心者の理解可能性です。システムを書いた場合、それはあなたにとって非常に理にかなっているかもしれません。しかし、それはCSSの上に追加の抽象化です。すべての人はCSSの知識を共有しますが、カスタムシステムの知識はシステムに積極的に関与している人々によってのみ共有されます。

カスタムプロパティを使用するのに新しいシステムには、非常に急な学習曲線があります。

ビデオ

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