관리 용이성을 위해 UIElements는 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
각 이름 부분은 라틴어 문자, 숫자, 대시로 구성됩니다. 각 이름 부분은 이중 밑줄(__
) 또는 이중 대시(--
)를 사용하여 서로 연결됩니다.
다음 예제는 메뉴에 대한 XML 코드를 보여줍니다.
<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 그래픽 디자인의 비일관성을 드러낼 수도 있습니다. 또한 특정 타입 이름(Button
, Label
)이나 요소 이름(#my-button
)을 BEM 선택자에 사용하는 것도 피해야 합니다.
VisualElement
를 BEM 친화적으로 만들기UIElements는 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.