USS를 작성하여 시각적 요소를 스타일링할 때는 다음 베스트 프랙티스를 따르십시오.
메모리 사용 효율을 높이려면 가능하면 인라인 스타일 대신 USS 파일을 사용하십시오.
인라인 스타일은 요소별로 적용되므로 메모리 오버헤드가 발생할 수 있습니다.많은 요소에 UXML 파일 또는 C# 스크립트에서 인라인 스타일을 사용하면 메모리 사용량이 빠르게 증가합니다.
모든 USS 선택자는 런타임에 적용되므로 아키텍처가 초기화 성능에 영향을 미칩니다.USS 선택자는 요소가 처음 나타나거나 클래스가 변경될 때 적용됩니다.
일반적으로 각 USS 파일은 룩업 테이블로 변환되므로 선택자가 많더라도 문제가 되지 않습니다.그러나 요소에 클래스를 추가할수록 성능은 선형적으로 감소합니다.리스트의 각 클래스는 룩업 테이블을 쿼리하는 데 사용됩니다.복잡도는 N1 x N2입니다. 여기서:
N1은 요소의 클래스 수입니다.계층 구조의 요소 수는 성능에 영향을 미치는 주요 사실입니다.스타일링 업데이트는 단순한 UI에서는 무시할 수 있는 수준이지만 수천 개의 요소가 있는 대규모 UI에서는 중요합니다.요소가 많은 선택자와 매칭되는 경우 각 규칙에서 가져온 스타일을 병합할 때 오버헤드가 발생합니다.
일반적으로 복잡 선택자는 단순 선택자보다 성능에 더 큰 영향을 미칩니다.복잡 선택자는 요소의 조상에 따라 매칭되는 요소가 달라집니다.가능하면 다음을 고려하십시오.
selector1 selector2 selector3) 대신 자식 선택자 (selector1 > selector2 > selector3)를 사용하십시오.selector1 > selector2 > *) 끝에 범용 선택자를 사용하거나 자손 선택자와 범용 선택자를 조합(selector1 * selector2)하는 것은 피하십시오.범용 선택자는 성능에 영향을 줄 수 있는 모든 잠재적 요소를 선택자에 대해 테스트합니다..yellow:hover > * > Button처럼 하위 요소가 많은 요소의 선택자에서 ‘:hover’ 유사 클래스를 사용하지 마십시오.마우스를 움직이면 :hover 선택자가 타겟팅하는 요소의 전체 계층 구조가 무효화됩니다.블록 요소 조정값(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 {
}
참고:
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