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