To keep things organized, UIElements has adopted BEM as the methodology for styling elements. While uisng BEM is not mandatory, it is recommended.
BEM stands for Block Element Modifier. BEM is a simple system that helps you write structured, non-ambiguous, easy to maintain selectors. With BEM, you assign classes to elements and then use these classes as the selectors in style sheets.
BEM classes have up to three components:
menu
, button
, list-view
menu__item
, button__icon
, or list-view__item
menu--disabled
, menu__item--disabled
, button--small
, or list-view__item--selected
.Each name part may consist of Latin letters, digits, and dashes. Each name part is joined together with either a double underscore __
or a double dash --
.
The following example shows XML code for a menu:
<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>
Since each element is equipped with classes that describe its role and appearance, you can write most of your selectors with only one class name:
.menu {
}
.menu__item {
}
.menu__item--disabled {
}
You should be able to style elements using a single class name. However, in some cases, you may need to use complex selectors. For example, you could use a complex selector when the style of an element depends on the modifier of its block:
.button {
}
.button__icon {
}
.button--small {
}
.button--small .button__icon {
}
Be careful that you do not specify long selectors. A long selector could indicate inconsistencies in the graphic design of your UI(User Interface) Allows a user to interact with your application. More info
See in Glossary. You should also avoid using type names (Button
, Label
) or element names (#my-button
) in your BEM selectors.
VisualElement
BEM-friendlyUIElements adheres to BEM. Each visual element has the necessary class names attached. For example, all TextElement
have the unity-text-element
class. Each instance of Button
, which derives from TextElement
, has its class list populated with the unity-button
and unity-text-element
classes.
If you derive a new element from VisualElement
or one of its descendants, following these guidelines to ensure that your element is easy to style using the BEM methodology:
AddToClassList()
in the constructor to add the relevant USS classes to your element instances.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?
Is something described here not working as you expect it to? It might be a Known Issue. Please check with the Issue Tracker at issuetracker.unity3d.com.
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:
Thanks for helping to make the Unity documentation better!