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
Did you find this page useful? Please give it a rating:
Thanks for rating this page!
What kind of problem would you like to report?
Thanks for letting us know! This page has been marked for review based on your feedback.
If you have time, you can provide more information to help us fix the problem faster.
Provide more information
You've told us this page needs code samples. If you'd like to help us further, you could provide a code sample, or tell us about what kind of code sample you'd like to see:
You've told us there are code samples on this page which don't work. If you know how to fix it, or have something better we could use instead, please let us know:
You've told us there is information missing from this page. Please tell us more about what's missing:
You've told us there is incorrect information on this page. If you know what we should change to make it correct, please tell us:
You've told us this page has unclear or confusing information. Please tell us more about what you found unclear or confusing, or let us know how we could make it clearer:
You've told us there is a spelling or grammar error on this page. Please tell us what's wrong:
You've told us this page has a problem. Please tell us more about what's wrong:
Thank you for helping to make the Unity documentation better!
Your feedback has been submitted as a ticket for our documentation team to review.
We are not able to reply to every ticket submitted.