シートを整理するために、UI Toolkit は要素のスタイリングの方法として 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
名前の各部分は、アルファベット文字、数字、ダッシュで構成されます。名前の各部分は、ダブルアンダースコア __ またはダブルダッシュ -- でつながれます。
次の例は、 メニューの XML コードを示しています。
<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 {
}
長いセレクターを指定しないように注意してください。セレクターが長いと、UI のグラフィックデザインに矛盾がある可能性があります。また、BEM セレクターで型名 (Button、Label) や要素名 (#my-button) を使用しないでください。
VisualElement を BEM 対応にする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