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

2022-04-17 23:52:00

本节列出了 SAPUI5 中与 CSS 样式相关的一些最重要的规则。

SAPUI5 控件使用 CSS 进行样式设置，并且由于应用程序可以提供自己的 CSS，因此它们可以调整样式。然而，这种适应越深，它们就越有可能与未来的 SAPUI5 更新或其他库和应用程序相关联。但如果我们遵循下面列出的规则，可以降低发生这种情况的风险。

Don’t override control class styling directly

SAPUI5 不保证跨版本样式类名的稳定性。如果样式类的命名在以后的版本中发生变化，样式规则将不再应用于目标元素。此外，当应用程序在共享运行时环境（如 SAP Fiori Launchpad）中运行时，直接覆盖控件类样式可能会导致样式冲突。

最佳实践就是，添加您自己的命名空间类。

不好的做法：直接修改 SAP 标准的 CSS class：

正确做法：

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

注意

如兼容性规则所述，SAPUI5 生成的 HTML 和 CSS 不是公共 API 的一部分，可能会在补丁和次要版本中发生变化。如果您决定覆盖样式，您有义务在每次更新 SAPUI5 时测试和更新您的修改。这样做的先决条件是您可以控制正在使用的 SAPUI5 版本，例如在 standalone 中。在 SAP Fiori launchpad 中运行您的应用程序时，这是不可能的，其中 SAPUI5 为所有应用程序集中加载。因此，SAP Fiori launchpad 应用程序不应覆盖样式。

码农公寓

相关文章