SAP UI5 使用 CSS 的一些注意事项

JerryWang_汪子熙 - 2021-10-08 20:53:04

---

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 元素。

Tags 标签

sapsaprfcjavascript前端html5

扩展阅读