Version: 2023.1
언어: 한국어
C# 스크립트에서 스타일 적용
TSS(테마 스타일시트)

USS 베스트 프랙티스

USS를 작성하여 시각적 요소를 스타일링할 때는 다음 베스트 프랙티스를 따르십시오.

인라인 스타일 피하기

메모리 사용 효율을 높이려면 가능하면 인라인 스타일 대신 USS 파일을 사용하십시오.

인라인 스타일은 요소별로 적용되므로 메모리 오버헤드가 발생할 수 있습니다.많은 요소에 UXML 파일 또는 C# 스크립트에서 인라인 스타일을 사용하면 메모리 사용량이 빠르게 증가합니다.

선택자 아키텍처 고려사항

모든 USS 선택자는 런타임에 적용되므로 아키텍처가 초기화 성능에 영향을 미칩니다.USS 선택자는 요소가 처음 나타나거나 클래스가 변경될 때 적용됩니다.

  • ‘:hover’ 선택자는 선택자가 상호작용 문제 및 리스타일링을 일으키는 주요 원인입니다.
  • 성능 영향은 프로파일러Update Styling 아래에 나타납니다.

일반적으로 각 USS 파일은 룩업 테이블로 변환되므로 선택자가 많더라도 문제가 되지 않습니다.그러나 요소에 클래스를 추가할수록 성능은 선형적으로 감소합니다.리스트의 각 클래스는 룩업 테이블을 쿼리하는 데 사용됩니다.복잡도는 N1 x N2입니다. 여기서:

  • N1은 요소의 클래스 수입니다.
  • ’N2’는 현재 적용 가능한 USS 파일 수입니다.

계층 구조의 요소 수는 성능에 영향을 미치는 주요 사실입니다.스타일링 업데이트는 단순한 UI에서는 무시할 수 있는 수준이지만 수천 개의 요소가 있는 대규모 UI에서는 중요합니다.요소가 많은 선택자와 매칭되는 경우 각 규칙에서 가져온 스타일을 병합할 때 오버헤드가 발생합니다.

복잡한 선택자 계층 구조 가이드라인

일반적으로 복잡 선택자는 단순 선택자보다 성능에 더 큰 영향을 미칩니다.복잡 선택자는 요소의 조상에 따라 매칭되는 요소가 달라집니다.가능하면 다음을 고려하십시오.

  • 부분적인 매칭을 원하면 자손 선택자 (selector1 selector2 selector3) 대신 자식 선택자 (selector1 > selector2 > selector3)를 사용하십시오.
  • 복잡 선택자(selector1 > selector2 > *) 끝에 범용 선택자를 사용하거나 자손 선택자와 범용 선택자를 조합(selector1 * selector2)하는 것은 피하십시오.범용 선택자는 성능에 영향을 줄 수 있는 모든 잠재적 요소를 선택자에 대해 테스트합니다.
  • .yellow:hover > * > Button처럼 하위 요소가 많은 요소의 선택자에서 ‘:hover’ 유사 클래스를 사용하지 마십시오.마우스를 움직이면 :hover 선택자가 타겟팅하는 요소의 전체 계층 구조가 무효화됩니다.

BEM을 사용하여 성능 개선

블록 요소 조정값(BEM) 규칙을 사용하여 계층적 선택자를 줄일 수 있습니다.BEM을 사용하면 각 요소는 다른 요소 내에서 특정 존재를 결합하는 클래스를 받습니다.

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

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

다음 예제는 메뉴에 대한 UXML 코드를 보여줍니다.

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

각 요소에는 해당 역할과 형상을 설명해주는 클래스가 탑재되므로 하나의 클래스명을 사용하여 대부분의 선택자를 작성할 수 있습니다.

.menu {
}

.menu__item {
}

.menu__item--disabled {
}

단일 클래스명으로 요소를 스타일링할 수 있습니다.때로는 복잡 선택자를 사용해야 할 수도 있습니다.예를 들어 요소의 스타일이 해당 블록의 조정값에 따라 달라지는 경우 복잡 선택자를 사용할 수 있습니다.

.button {
}

.button__icon {
}

.button--small {
}

.button--small .button__icon {
}

참고:

  • 긴 선택자 지정 피하기선택자가 길면 UI의 그래픽 디자인이 일관되지 않다는 것을 나타낼 수 있습니다.
  • BEM 선택자에 타입 이름(Button, Label) 또는 요소 이름(#my-button)을 사용하지 마십시오.

시각적 요소를 BEM 친화적으로 만들기

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

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

  • 생성자에 AddToClassList()를 사용하여 관련 USS 클래스를 요소 인스턴스에 추가합니다.
  • 새로운 요소가 생성자의 자식 요소를 인스턴스화하는 경우 관련 클래스를 해당 자식에 할당합니다. 예: my-block**first-child, my-block**other-child
  • 요소가 다수의 상태 또는 배리언트(예: 소형, 대형 등)를 지원하는 경우 요소 상태가 변할 때 또는 요소 배리언트가 선택될 때 관련 클래스를 추가하거나 제거합니다.
  • 다른 프로젝트에서 요소를 사용하는 경우 클래스에 접두사를 붙여 기존 사용자 클래스명과의 충돌을 방지합니다.

추가 리소스

C# 스크립트에서 스타일 적용
TSS(테마 스타일시트)