To keep things organized, UIElements has adopted BEM as the methodology for styling elements. While uisng BEM is not mandatory, it is recommended.
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 対応にするUIElements は 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