Write style sheets

シートを整理するために、UI Toolkit は要素のスタイリングの方法として BEM を採用しています。BEM の使用は必須ではありませんが、推奨されます。

BEM について

BEM は Block Element Modifier の略です。BEM はシンプルなシステムで、構造化され、あいまいでない、メンテナンスが簡単なセレクターを作成するのに役立ちます。BEM では、要素にクラスを割り当て、それらのクラスをスタイルシートのセレクターとして使用します。

BEM クラスには最大 3 つのコンポーネントがあります。

• ブロック名: ブロックは意味のあるスタンドアロンのエンティティまたは制御です。例: menu、button、list-view
• 要素名: スタンドアロンの意味を持たず、意味的にそのブロックに関連付けられているブロックの一部。要素名は 2 つのアンダースコアを使ってブロック名に追加されます。例: menu**item、 button**icon、list-view__item
• モディファイア: ブロックや要素の外観や動作を変更するフラグ。モディファイアは 2 つのダッシュを使ってブロックまたは要素名に追加されます。例: 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) を使用しないでください。

Make VisualElement BEM-friendly

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
• 要素が複数の状態やバリアント (小さいや大きいなど) をサポートする場合は、要素の状態が変化するときや要素のバリアントが選択されるときに、関連するクラスを追加、または、削除します。
• 要素が他のプロジェクトでの使用を意図している場合は、既存のユーザークラス名との競合を避けるために、クラスにプレフィックスを付けることを検討してください。