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
Did you find this page useful? Please give it a rating:
Thanks for rating this page!
What kind of problem would you like to report?
Thanks for letting us know! This page has been marked for review based on your feedback.
If you have time, you can provide more information to help us fix the problem faster.
Provide more information
You've told us this page needs code samples. If you'd like to help us further, you could provide a code sample, or tell us about what kind of code sample you'd like to see:
You've told us there are code samples on this page which don't work. If you know how to fix it, or have something better we could use instead, please let us know:
You've told us there is information missing from this page. Please tell us more about what's missing:
You've told us there is incorrect information on this page. If you know what we should change to make it correct, please tell us:
You've told us this page has unclear or confusing information. Please tell us more about what you found unclear or confusing, or let us know how we could make it clearer:
You've told us there is a spelling or grammar error on this page. Please tell us what's wrong:
You've told us this page has a problem. Please tell us more about what's wrong:
Thank you for helping to make the Unity documentation better!
Your feedback has been submitted as a ticket for our documentation team to review.
We are not able to reply to every ticket submitted.