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

本節列出了 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 元素。

注意

如相容性規則所述，SAPUI5 生成的 HTML 和 CSS 不是公共 API 的一部分，可能會在更新檔和次要版本中發生變化。 如果您決定覆寫樣式，您有義務在每次更新 SAPUI5 時測試和更新您的修改。 這樣做的先決條件是您可以控制正在使用的 SAPUI5 版本，例如在 standalone 中。 在 SAP Fiori launchpad 中運作您的應用程式時，這是不可能的，其中 SAPUI5 為所有應用程式集中加載。 是以，SAP Fiori launchpad 應用程式不應覆寫樣式。