USS を記述してビジュアル要素のスタイルを設定する場合は、以下のベストプラクティスに従ってください。
メモリをより効率的に使用するために、可能な場合は、インラインスタイルの代わりに USS ファイルを使用します。
インラインスタイルは要素ごとに適用され、メモリのオーバーヘッドの原因になります。C# スクリプトや UXML ファイルで多くの要素にインラインスタイルを使用すると、メモリ使用量がすぐに高くなります。
すべての USS セレクターはランタイム時に適用されるため、そのアーキテクチャが初期化のパフォーマンスに影響します。USS セレクターは、要素が初めて現れた時やクラスが変更された時に適用されます。
:hover セレクターは、セレクターが相互作用の問題やスタイル変更を引き起こす主な要因です。各 USS ファイルがルックアップテーブルになるため、通常は、セレクターが多数あることは問題ありません。ただし、要素にクラスを追加すると、パフォーマンスは直線的に低下します。リスト内の各クラスはルックアップテーブルのクエリに使用されます。複雑さは N1 x N2 (以下参照) で決まります。
N1 は要素上のクラスの数です。N2 は、該当する USS ファイルの現在の数です。階層内の要素数は、パフォーマンスに影響を及ぼす主な要因です。Update Styling は、単純な UI では無視できるかもしれませんが、数千の要素がある大規模な UI では重要です。ある要素が多くのセレクターと一致する場合、各ルールからのスタイルをマージする際のオーバーヘッドが発生します。
一般に、複合セレクターは単純セレクターよりもパフォーマンスに影響を与えます。複合セレクターは、要素を照合するにあたってその先祖に依存します。可能な限り、以下のことを実行してください。
selector1 selector2 selector3) ではなく 子セレクター (selector1 > selector2 > selector3) を使用してください。selector1 > selector2 > *) や、子孫セレクターとユニバーサルセレクターを組み合わせる (selector1 * selector2) ことは避けてください。ユニバーサルセレクターは、考えられる全ての要素をセレクターに照らし合わせてテストするため、パフォーマンスに影響する可能性があります。:hover 擬似クラスを使用することは避けてください (例: .yellow:hover > * > Button など)。マウスの動きが、:hover セレクターのターゲットになっている要素の階層全体を無効化します。Block Element Modifier (BEM) 規則を使用すると、階層的なセレクターを減らすことができます。BEM を使用した場合、各要素は、別の要素内でどこに存在するかと組み合わせたクラスを受け取ります。
BEM は Block Element Modifier の略です。BEM はシンプルなシステムで、構造化され、あいまいでない、メンテナンスが簡単なセレクターを作成するのに役立ちます。BEM では、要素にクラスを割り当て、それらのクラスをスタイルシートのセレクターとして使用します。
BEM クラスには最大 3 つのコンポーネントがあります。
menu、button、list-view など。menu__item、button__icon、list-view__item など。menu--disabled、menu__item--disabled、button--small、list-view__item--selected など。名前の各部分は、アルファベット文字、数字、ダッシュで構成されます。名前の各部分は、ダブルアンダースコア __ またはダブルダッシュ -- でつながれます。
以下の例は、 メニューの UXML コードを示しています。
<VisualElement class="menu">
<Label class="menu__item" text="Banana" />
<Label class="menu__item" text="Apple" />
<Label class="menu__item menu__item--disabled" text="Orange" />
</VisualElement>
各要素はその役割と外観を説明するクラスを備えているため、ほとんどのセレクターは 1 つのクラス名で作成できます。
.menu {
}
.menu__item {
}
.menu__item--disabled {
}
要素のスタイル設定は 1 つのクラス名で行えます。複合セレクターを使用する必要がある場合もあります。例えば、 要素のスタイルがそのブロックのモディファイアに依存する場合は、複合セレクターを使用できます。
.button {
}
.button__icon {
}
.button--small {
}
.button--small .button__icon {
}
ノート:
Button、Label) や要素名 (#my-button) を使用しないでください。UI Toolkit は BEM に準拠しています。各ビジュアル要素には、必要なクラス名が付けられています。例えば、すべての TextElement は unity-text-element クラスを持ちます。TextElement から派生する Button の各インスタンスには、unity-button クラスと unity-text-element クラスが設定されたクラスリストがあります。
VisualElement またはその子孫の 1 つから新しい要素を派生させる場合は、以下のガイドラインに従って、BEM 手法を使用して要素のスタイルを簡単に設定できます。
AddToClassList() を使用して、関連する USS クラスを要素インスタンスに追加します。my-block__first-child、my-block__other-child など。