CSS Styling Issues

本节列出了 SAPUI5 中与 CSS 款式相干的一些最重要的规定。

SAPUI5 控件应用 CSS 进行款式设置，并且因为应用程序能够提供本人的 CSS，因而它们能够调整款式。然而，这种适应越深，它们就越有可能与将来的 SAPUI5 更新或其余库和应用程序相关联。但如果咱们遵循上面列出的规定，能够升高产生这种状况的危险。

Don’t override control class styling directly

SAPUI5 不保障跨版本款式类名的稳定性。如果款式类的命名在当前的版本中发生变化，款式规定将不再利用于指标元素。此外，当应用程序在共享运行时环境（如 SAP Fiori Launchpad）中运行时，间接笼罩控件类款式可能会导致款式抵触。

最佳实际就是，增加您本人的命名空间类。

不好的做法：间接批改 SAP 规范的 CSS class：

.sapMInputBaseError {font-weight: bold;}

正确做法：

oButton.addStyleClass("poaAppError");

.poaAppError {font-weight: bold;}

Don’t style DOM element names directly

间接款式化 DOM 元素会导致不可预知的后果，因为 SAPUI5 不保障外部管制 DOM 树随工夫的稳定性。此外，当应用程序在共享运行时环境（如 SAP Fiori Launchpad）中运行或增加自定义 HTML 时，这可能会导致款式抵触。最好将款式更改限度为专门应用的 CSS 类。

不好的例子：

div {width: 120px;}

正确做法：

.myStyleClass {width: 120px;}

Don’t use generated IDs in CSS selectors

SAPUI5 应用程序能够为元素创立动静 ID。不要将这些 ID 用作自定义 CSS 中的选择器，因为它们会随着工夫而扭转。最好增加和应用 CSS 类。

错误做法：

#__view1__button0 {font-weight: bold;}

正确做法：

.myEmphasizedButton {font-weight: bold;}

Don’t create selectors that are not namespaced

未命名空间的自定义选择器和 CSS 类可能会导致共享运行时环境（如 SAP Fiori Launchpad）中的款式抵触，或者蕴含可能应用雷同 CSS 类名称的其余 JavaScript 库时。

错误做法：

.title {font-weight: bold;}

正确做法：

.poaAppTitle {font-weight: bold;}

Don’t use hard-coded colors, font sizes and images if the app should be themable

应用程序的主题性依赖于 SAPUI5 主题 CSS 中的 LESS 计算。应用程序和自定义控件中的硬编码色彩、字体和图像意味着这些色彩不会被主题批改，这会导致设计问题或可拜访性问题（例如，在高对比度彩色 (HCB) 主题中）。您能够应用由这些 LESS 计算提供的非凡 CSS 类。

错误做法：

.myCustomHTML {
    color: #FFF;
    background-color: blue;
}

正确做法：

将 CSS 类 sapThemeTextInverted 和 sapThemeHighlight-asBackgroundColor 增加到您的自定义 HTML 元素。