Best practices for USS

Follow these best practices when you write USS to style visual elements.

Avoid inline styles

Use USS files instead of inline styles when you can for more efficient memory usage.

Inline styles are per element and can cause memory overhead. When you use inline styles in a C# script or a UXML file on many elements, the memory usage becomes high quickly.

Selector architecture consideration

All USS selectors are applied at runtime so the architecture affects initialization performance. USS selectors are applied when an element first appears or when its classes change:

• The :hover selector is the main culprit for selectors to cause interactivity issues and a re-styling.
• The performance impact appears under the Update Styling in the Profiler.

Usually, it’s not a problem if you have a lot of selectors because each USS file is turned into a lookup table. However, the performance decreases linearly as you add classes to an element. Each class in the list is used to query the lookup table. The complexity is N1 x N2, where:

• N1 is the number of class on the element
• N2 is the current number of applicable USS files

The number of elements in the hierarchy is the main fact that affects performance. Update Styling might be negligible for simple UIs but is significant for large UIs that have several thousands of elements. If an element matches a lot of selectors, it causes overhead to merge the styles coming from each rule.

Complex selectors hierarchy guidelines

In general, complex selectors have more impact on performance than simple selectors. Complex selectors depend on the ancestors of an element to match it. When possible, consider the following:

• If you want to have partial match, use the child selector (selector1 > selector2 > selector3) instead of the descendant selector (selector1 selector2 selector3).
• Avoid using universal selector at the end of complex selectors (selector1 > selector2 > *) or the combination of descendant selector with the universal selector (selector1 * selector2). The universal selector tests every potential element against the selector which can impact performance.
• Avoid using :hover pseudo-class in selectors on elements with many descendants, such as .yellow:hover > * > Button. Mouse movements invalidate the entire hierarchy of elements targeted by an :hover selector.

Use BEM to improve performance

You can use the Block Element Modifier(BEM) convention to reduce hierarchical selectors. With BEM, each element receives a class that combines its specific existence inside another element.

About BEM

BEM은 Block Element Modifier의 약자로, 개발자들이 구조화되고, 명료하고, 쉽게 유지할 수 있는 선택자를 작성하도록 도와주는 간단한 시스템입니다. 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

각 이름 부분은 라틴어 문자, 숫자, 대시로 구성됩니다. 각 이름 부분은 이중 밑줄(__) 또는 이중 대시(--)를 사용하여 서로 연결됩니다.

The following example shows UXML code for a menu:

<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>

Each element is equipped with classes that describe its role and appearance, you can write most of your selectors with only one class name:

.menu {
}

.menu__item {
}

.menu__item--disabled {
}

You can style elements with a single class name. Sometimes, you might need to use complex selectors. For example, you can use a complex selector when the style of an element depends on the modifier of its block:

.button {
}

.button__icon {
}

.button--small {
}

.button--small .button__icon {
}

참고:

• Avoid specifying long selectors. A long selector could indicate inconsistencies in the graphic design of your UI.
• Avoid using type names (Button, Label) or element names (#my-button) in your BEM selectors.

Make visual elements BEM-friendly

UI 툴킷은 BEM을 준수합니다. 각 시각적 요소에는 필요한 클래스명이 연결되어 있습니다. 예를 들어 모든 TextElement에는 unity-text-element 클래스가 있습니다. TextElement에서 파생되는 Button의 각 인스턴스의 경우 해당 클래스 리스트가 unity-button 및 unity-text-element 클래스로 채워집니다.

VisualElement 또는 해당 자손 중 하나로부터 새로운 요소를 파생하는 경우 다음의 가이드라인을 준수하면 BEM 방식을 사용하여 요소 스타일 지정을 쉽게 만들 수 있습니다.

• 생성자에 AddToClassList()를 사용하여 관련 USS 클래스를 요소 인스턴스에 추가합니다.
• 새로운 요소가 생성자의 자식 요소를 인스턴스화하는 경우 관련 클래스를 해당 자식에 할당합니다. 예: my-block__first-child, my-block__other-child
• 요소가 다수의 상태 또는 배리언트(예: 소형, 대형 등)를 지원하는 경우 요소 상태가 변할 때 또는 요소 배리언트가 선택될 때 관련 클래스를 추가하거나 제거합니다.
• If you use the element in other projects, consider prefixing your classes to avoid conflicts with existing user class names.

추가 리소스

• Introduction to USS
• USS selectors