SAP Spartacus 的 CSS 架構
在 Angular 中，元件的 CSS 樣式被封裝進了自己的檢視中，而不會影響到應用程式的其它部分。
通過在元件的元資料上設定檢視封裝模式，你可以分別控制每個元件的封裝模式。 可選的封裝模式一共有如下幾種：
- ShadowDom 模式：使用瀏覽器原生的 Shadow DOM 實現，可以參閱 MDN 上的 Shadow DOM 文件來為元件的宿主元素附加一個 Shadow DOM。
元件的檢視被附加到這個 Shadow DOM 中，元件的樣式也被包含在這個 Shadow DOM 中。
記憶方式：不進不出，沒有樣式能進來，元件樣式出不去。)
- Emulated 模式（預設值）通過預處理（並改名）CSS 程式碼來模擬 Shadow DOM 的行為，以達到把 CSS 樣式侷限在元件檢視中的目的。
只進不出，全域性樣式能進來，元件樣式出不去。
你可以使用同樣的方式來操作 Shadow DOM，就和操作常規 DOM 一樣——例如新增子節點、設定屬性，以及為節點新增自己的樣式（例如通過 element.style 屬性），或者為整個 Shadow DOM 新增樣式（例如在 style 元素內新增樣式）。不同的是，Shadow DOM 內部的元素始終不會影響到它外部的元素（除了 :focus-within），這為封裝提供了便利：
注意，不管從哪個方面來看，Shadow DOM 都不是一個新事物——在過去的很長一段時間裡，瀏覽器用它來封裝一些元素的內部結構。以一個有著預設播放控制按鈕的
那麼，SAP Spartacus 使用了本文目前為止提到的這些 Shadow DOM 機制了嗎？
先了解 SAP Spartacus CSS 的設計原理。
Spartacus 作為一組標準組件提供，這些元件分佈在 npm 庫中。 這些庫有助於確保 Spartacus 同時保持可擴充套件性和可升級性。
為了提供儘可能多的樣式靈活性，所有 CSS 規則都在單獨的 @spartacus/styles 庫中提供。 這使得樣式完全可選、可配置和可擴充套件。 您可以擴充套件或替換標準樣式，也可以實現您自己的樣式規則。
此外，現有的 UI 框架（例如 Bootstrap）可以在 Spartacus 中使用，而不會使其成為硬編碼依賴項。
SAP Spartacus Style 版本機制
Spartacus 庫支援語義版本控制，這意味著在主要版本的生命週期中不允許進行重大更改。對於樣式庫也是如此。會導致 UI 體驗差異的新樣式規則或調整後的規則被視為重大更改。Spartacus 庫的釋出假設客戶依賴於語義版本控制方案，因此在主要版本的生命週期中不會進行重大更改，例如對樣式庫的隱式更改。
同時，Spartacus 很可能會從一個小版本進化到下一個。為允許樣式層中的逐漸更改，為特定版本添加了新的或調整後的樣式規則，但除非您明確選擇接收這些更改，否則這些更改不會新增到樣式構建過程中。您需要設定一個變數以利用最新的突破性樣式更改。請注意，無論如何都會新增非破壞性更改。
以下示例說明了 2.2 版的附加樣式：
cx-mini-cart {
@include forVersion(2.1) {
background: blue;
}
@include forVersion(2.2) {
background: deepskyblue;
}
}
SAP Spartacus CSS 技術
Spartacus 是結合以下 CSS 技術開發的：
- SASS，用作預處理語言，就像在當今大多數 UI 框架中一樣。
- CSS 自定義屬性，用於全域性主題。
- CSS post 處理，旨在用於填充舊瀏覽器所需的任何語法。
SAP Spartacus 並未使用本文之前介紹的任何一種 Shadom DOM 實現技術。Angular 的模擬封裝無法使用，因為元件樣式是由樣式庫提供的。 BEM 被認為是老式和複雜的。 此外，定義明確、細粒度的元件架構不需要 BEM 來封裝樣式。
全域性主題
全域性主題是用變數組織的，因此主題不是硬編碼的。 對於變數，您可以使用兩種常用方法：
- SASS 變數
- CSS 自定義屬性（換句話說，CSS 變數）。
Spartacus 使用 CSS 變數進行主題化。 CSS 變數具有執行時可配置的優點。 而且，它們可以穿透shadow DOM（即web元件）。 此外，CSS 變數是繼承的，並且比 SASS 變數提供更大的靈活性。
主題變數有助於 Spartacus 向客戶提供的所謂“合約”。 該合約旨在保持穩定，並且應該很少更改。只有在主要版本中，Spartacus 才能引入一組新變數，但這不被視為最佳實踐。
為了提供一組穩定的變數，Spartacus 中的 CSS 變數主要用於配色方案和字型定義。 這些可以被認為是一組全域性主題定義。
下面是 css 變數的一個例子：
:root {
--cx-color-primary: red;
}
cx-link {
color: var(--cx-color-primary);
}
CSS 變數可以在文件的根或特定的選擇器上進行定製。
Component Styles
Spartacus 包含大量可用於構建店面體驗的元件。雖然商業可能是一種商品，但造型本質上是一個主觀主題。不僅是顏色和字型的選擇，還有元件的空間，以及背景、線條等。
無論 Spartacus 提供什麼，它都不能代表您的品牌或企業形象。出於這個原因，Spartacus 具有高度的靈活性，因此您可以擴充套件元件樣式，或者完全跳過它們。
由於 Spartacus 元件是在庫中構建和分發的，因此無法使用元件樣式, 因為 Component 和 style 的定義，在 Spartacus 裡是分開的。這些樣式將被預處理並烘焙到元件庫中。這意味著 CSS 規則不是可選的，也不是很容易定製的。
取而代之的是，在樣式庫中可選擇提供元件樣式。您可以使用這些樣式、擴充套件它們或完全跳過它們並從頭開始構建 CSS 規則。樣式庫和元件庫之間的契約是通過（唯一的）元件選擇器完成的。
Placeholder Selectors
為了使樣式庫中提供的 CSS 規則完全可選，樣式被包裝在佔位符選擇器中。 佔位符選擇器是一種以百分比開頭的 SASS 技術，例如 %cx-mini-cart。 佔位符選擇器不會新增到最終的 CSS 中。相反，它們需要顯式被擴充套件，以最終出現在最終的 CSS 中。
以下是使用佔位符選擇器的元件樣式示例：
%cx-link {
a {
display: inline;
padding: 0;
margin: 0;
color: currentColor;
display: block;
}
}
雖然可以安全地匯入佔位符選擇器，但只有明確使用它才會影響最終的 CSS。
這些佔位符選擇器，只有被真正的擴充套件時，才會出現在最後的 css 裡。
因此，樣式可以擴充套件如下：
cx-link {
@extend %cx-link !optional;
a {
color: red;
}
}
!optional 的含義：
可選標誌確保程式碼不會在構建期間中斷，只要特定匯入不是匯入樣式的一部分。
Spartacus 通過迭代配置的元件選擇器來生成元件。
Skipping Specific Component Styles
元件樣式是可選的，因為它們是從樣式庫中提取的。 因此，您可能希望完全禁用某些標準組件樣式。 要禁用標準組件樣式，您可以將元件選擇器新增到 $skipComponentStyles 列表。 以下是演示從樣式庫中跳過兩個標準組件的示例：
$skipComponentStyles: (cx-product-carousel, cx-searchbox);
如果您需要從頭開始建立樣式並且不想覆蓋來自 Spartacus 樣式庫的特定樣式規則，則跳過特定的元件樣式可能會有所幫助。
Page Layout Styles
全域性主題和元件樣式對於在頁面上呈現元件最重要。 但是，在頁面上編排元件的整體佈局是另一個重要的樣式層。 有關此圖層的更多資訊，請參閱頁面佈局。
更多Jerry的原創文章，盡在："汪子熙":