【Unity】【UI Toolkit】USSのベストプラクティス

UnityのUI ToolkitにおけるUSSのベストプラクティスについてまとめました。

Unity 2022.2.19

はじめに

マニュアルを見ていたらBest practices for USSというページを発見しました。

docs.unity3d.com

パフォーマンスに関わる内容など、重要な事項が書かれているため、本記事にまとめておきます。

スタイルは極力USSに書く

メモリの負荷を軽減するため、スタイルは極力USSで定義することが推奨されています。
C#やUXMLでスタイルを定義する(これをインラインスタイルと呼びます)と、対象の要素が多ければ多いほど使用するメモリが多くなります。

セレクタ適用時のパフォーマンス

セレクタは最初に要素を表示するとき、またはクラスを変更したときに適用されます。
一つのUSSのファイルの中に多数のセレクタが存在している分にはルックアップテーブルが作られるため、パフォーマンス上の問題はありません。

しかし、要素のクラス数 x USSファイル数に応じて負荷が上がるため、クラス数と適用されているUSSファイル数が多い要素が数多くあるようなケースではパフォーマンスに注意が必要です。

複雑なセレクタガイドライン

複雑なセレクタはパフォーマンスを落としやすいので以下の点に注意する必要があります。

  • できるだけdescendant selector(selector1 selector2 selector3)の代わりにchild selector(selector1 > selector2 > selector3)を使う
  • universal selectorを複雑なセレクタの最後尾で使わない(selector1 > selector2 > *
  • universal selectorをdescendant selectorと併用しない(selector1 * selector2
  • 多くの子孫要素を持つ要素に対して:hoverを使った複雑なセレクタ.yellow:hover > * > Button)を作らない

パフォーマンスを上げるためにBEMを使う

BEMに従って設計にすることでパフォーマンスの向上が期待できます。
BEMについては別途以下の記事にまとめていますので、必要に応じて参照してください

light11.hatenadiary.com

関連

light11.hatenadiary.com

参考

docs.unity3d.com