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

注意

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

總結

以上是生活随笔為你收集整理的SAP UI5 使用 CSS 的一些注意事项的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。