USS를 작성하여 시각적 요소를 스타일링할 때는 다음 베스트 프랙티스를 따르십시오.
메모리 사용 효율을 높이려면 가능하면 인라인 스타일 대신 USS 파일을 사용하십시오.
인라인 스타일은 요소별로 적용되며 메모리 오버헤드가 발생할 수 있습니다. C# 스크립트에서 인라인 스타일을 사용하거나 여러 요소에 UXML 파일을 사용하면 메모리 사용량이 빠르게 증가합니다.
모든 USS 선택자는 런타임 시 적용되므로 아키텍처가 초기화 성능에 영향을 미칩니다. USS 선택자는 요소가 처음 표시되거나 클래스가 변경될 때 적용됩니다.
:hover 선택자는 선택자가 상호 작용 문제 및 리스타일링을 일으키는 주요 원인입니다.일반적으로 각 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을 사용하면 요소에 클래스를 할당한 다음 이러한 클래스를 스타일시트의 선택자로 사용합니다.
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 {
}
참고:
Button, Label) 또는 요소 이름(#my-button)을 사용하지 마십시오.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