オープンプロップ（およびシステムとしてのカスタムプロパティ）

CSSカスタムプロパティは、トークンを設計するための簡単なアプローチを提供します。色、フォント、間隔、タイミングなどの再利用可能なユニット。これらのトークンに主に依存すると、クリーンで一貫したデザインが促進されます。これは、Web開発における重要な目的です。このアプローチは、ユーティリティクラスのフレームワークの魅力を反映しています。

ユーティリティクラスのフレームワークの人気は、事前に構成されたクラスに由来し、審美的に心地よいデザインにつながります。価値の限られた選択により、一貫したプロフェッショナルな外観が保証されます。

これらの例を考慮してください：事前定義されたクラスの使用：

<h1 id="ヘッダ">ヘッダ</h1>

... CSSカスタムプロパティの使用に匹敵します。

 html {
   - 色 - プライマリー：緑;
   - サイズ - と - ラージ：3REM;
  / * ...詳細トークン */
}

H1 {
  色：var（ - 色プリマリー）;
  font-size：var（ -  size-large）;
}

どちらもゼロビルドオプションを提供します。 Tachyonsのようなフレームワークは、すぐに使用できるユーティリティクラスを提供しますが、Windiはジャストインタイムコンパイラを採用しています。同様に、花粉は事前に構築されたカスタムプロパティのライブラリを提供しており、革新的なオープンプロップは、ジャストインタイムコンパイラを使用して、使用済みプロパティのみを含めます。

オープンな小道具の紹介：

Open Propsは、基本的にCSSカスタムプロパティの包括的なコレクションであり、スタイリングの堅牢な基盤として機能します。 「カスタムプロパティファースト」アプローチを強調し、事前定義されたオプションセットでデザイントークンの確立されたプラクティスを反映しています。

類似点は明確です：

Open Propsの魅力的なデフォルト値がその主な抽選である可能性があります。

ただし、オープンな小道具は要素の命名の必要性を排除しません。標準のCSSセレクター（名前付きクラスと同様）をターゲットおよびスタイル要素に使用します。重要な違いは、値を手動で作成するのではなく、事前に定義されたカスタムプロパティを活用することです。

Core Open Propsライブラリ（利用可能なソース）の重量は、わずか4.4kb（DevTools測定に基づいて）にあります。これは、最小限のオーバーヘッドを表すカスタムCSSを除外します。追加のプロパックはサイズを増やしますが、それらは小さくなり、ジャストインタイムのコンピレーションはサイズの懸念に対処します。これをStackblitzで実験できます。

Open Propsは魅力的なソリューションを提供します。標準のCSSへの依存により、将来の互換性と柔軟性が保証されます。

以上がオープンプロップ（およびシステムとしてのカスタムプロパティ）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。