Show TOC

CSS Styling IssuesLocate this document in the navigation structure

This section lists some of the most important rules relating to CSS styling in SAPUI5.

SAPUI5 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 SAPUI5 updates or with other libraries and apps getting involved. If you follow the rules listed below, you will reduce the risk of this happening.

Don't override control class styling directly

SAPUI5 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.

Table 1: 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;
}
Don't style DOM element names directly

Styling DOM elements directly will lead to unpredictable results, as SAPUI5 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.

Table 2: Examples
Bad Example Good Example 
div {
	width: 120px;
}
 
.myStyleClass {
	width: 120px;
}
Don't use generated IDs in CSS selectors

SAPUI5 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.

Table 3: 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;
}
Don't create selectors that are not namespaced

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.

Table 4: Examples
Bad Example Good Example 
.title {
	font-weight: bold;
}
 
.poaAppTitle {
	font-weight: bold;
}
Don't use hard-coded colors, font sizes and images if the app should be themable

Themability of applications relies on LESS calculations within the SAPUI5 theme CSS. 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 can use special CSS classes instead that are supplied by these LESS calculations.

Table 5: Examples
Bad Example Good Example 
.myCustomHTML {
	color: #FFF;
	background-color: blue;
}

Add the CSS classes sapThemeTextInverted and sapThemeHighlight-asBackgroundColor to your custom HTML element.

See also: CSS Classes for Theme Parameters.

Don't use theming parameters for attributes they were not intended for

SAPUI5 applications come with a built-in set of parameters which are used for theme-dependent styling, mainly for colors. They are accessible using the sap.ui.core.theming.Parameters.get() API (and for library builds using the OpenUI5 build mechanism, also in the *.less files in control libraries). 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.

Table 6: Examples
Bad Example Good Example 
var sColor = sap.ui.core.theming.Parameters.get("sapUiMediumBorder");
$(oSomeDomElement).css("background-color", sColor);
 
var sColor = sap.ui.core.theming.Parameters.get("sapUiMediumBorder");
$(oSomeDomElement).css("border-color", sColor);

See also Namespace sap.ui.core.theming.Parameters in the Demo Kit.