This section lists some of the most important rules relating to CSS styling in OpenUI5.
OpenUI5 controls are styled with CSS, and as applications can provide their own CSS, they can adapt the styling. However, the deeper such adaptations are, the more likely is it that they break with future OpenUI5 updates or with other libraries and apps getting involved. If you follow the rules listed below, you will reduce the risk of this happening.
OpenUI5 does not guarantee the stability of style class names across versions. If the naming of style classes is changed in future versions, styling rules will no longer be applied to targeted elements. In addition, overriding control class styles directly might lead to style clashes when applications are run in shared runtime environments (like SAP Fiori launchpad).
Add your own namespaced classes instead.
Examples
| Bad Example | Good Example |
|---|---|
| ``` .sapMInputBaseError { font-weight: bold; } ``` | Add a custom CSS class to the control in those situations where you want additional styling: `oButton.addStyleClass("poaAppError");` Then provide the style for this class: ``` .poaAppError { font-weight: bold; } ``` |
Styling DOM elements directly will lead to unpredictable results, as OpenUI5 does not guarantee the stability of the inner-control DOM-tree over time. In addition, this might lead to styling clashes when applications run in shared runtime environments (like SAP Fiori launchpad) or when custom HTML is added. It is better to limit styling changes to specifically used CSS classes.
Examples
| Bad Example | Good Example |
|---|---|
| ```html div { width: 120px; } ``` | ``` .myStyleClass { width: 120px; } ``` |
OpenUI5 applications can create dynamic IDs for elements. Do not use these IDs as selectors in custom CSS as they can change over time. It is better to add and use CSS classes instead.
Examples
| Bad Example | Good Example |
|---|---|
| ``` #__view1__button0 { font-weight: bold; } ``` | Add a style class as described above and then define the following: ``` .myEmphasizedButton { font-weight: bold; } ``` |
Custom selectors and CSS classes that are not namespaced might lead to style clashes in shared runtime environments like SAP Fiori launchpad, or when other JavaScript libraries are included that might use the same CSS class names.
Examples
| Bad Example | Good Example |
|---|---|
| ``` .title { font-weight: bold; } ``` | ``` .poaAppTitle { font-weight: bold; } ``` |
Themability of applications relies on LESS calculations within the OpenUI5 theme CSS and custom CSS properties. Hard-coding colors, fonts and images in applications and custom controls means that these colors are not modified by theming, which leads to design issues or accessibility issues (for example, in the High Contrast Black (HCB) theme).You should use custom CSS properties to provide a theme-dependent behavior.
Examples
| Bad Example | Good Example |
|---|---|
| ``` .myCustomHTML { color: #FFF; background-color: blue; } ``` | ``` ` .myCustomHTML { color: var(--sapContent_ContrastTextColor); background-color: var(--sapHighlightColor); } ``` |
For more information, see Theme Parameter Toolbox.
OpenUI5 applications come with a built-in set of parameters which are used for theme-dependent styling, mainly for colors. They are accessible using custom CSS properties. These theme parameters have descriptive names, meaning that by looking at a parameter name, you can see the usage it has been defined for.
To ensure that you do not use combinations of theme colors which may clash after future theme changes, do not use background colors for fonts or vice versa, for example, and do not use border colors for anything else but borders.
Examples
| Bad Example | Good Example |
|---|---|
| ``` .myCustomHTML { background-color: var(--sapNeutralBorderColor); } ``` | ``` .myCustomHTML { background-color: var(--sapBackgroundColor); } ``` |
For more information, see Theme Parameter Toolbox.
For more information, see Namespace sap.ui.core.theming.Parameters.