关于sap: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 都不是一个新事物——在过来的很长一段时间里，浏览器用它来封装一些元素的内部结构。以一个有着默认播放管制按钮的 <video> 元素为例。你所能看到的只是一个 <video> 标签，实际上，在它的 Shadow DOM 中，蕴含来一系列的按钮和其余控制器。Shadow DOM 规范容许你为你本人的元素（custom element）保护一组 Shadow DOM。

那么，SAP Spartacus 应用了本文目前为止提到的这些 Shadow DOM 机制了吗？

先理解 SAP Spartacus CSS 的设计原理。

Spartacus 作为一组规范组件提供，这些组件散布在 npm 库中。这些库有助于确保 Spartacus 同时放弃可扩展性和可降级性。

为了提供尽可能多的款式灵活性，所有 CSS 规定都在独自的 @spartacus/styles 库中提供。这使得款式齐全可选、可配置和可扩大。您能够扩大或替换规范款式，也能够实现您本人的款式规定。

此外，现有的 UI 框架（例如 Bootstrap）能够在 Spartacus 中应用，而不会使其成为硬编码依赖项。

Spartacus 库反对语义版本控制，这意味着在次要版本的生命周期中不容许进行重大更改。对于款式库也是如此。会导致 UI 体验差别的新款式规定或调整后的规定被视为重大更改。Spartacus 库的公布假如客户依赖于语义版本控制计划，因而在次要版本的生命周期中不会进行重大更改，例如对款式库的隐式更改。

同时，Spartacus 很可能会从一个小版本进化到下一个。为容许款式层中的逐步更改，为特定版本增加了新的或调整后的款式规定，但除非您明确抉择接管这些更改，否则这些更改不会增加到款式构建过程中。您须要设置一个变量以利用最新的突破性款式更改。请留神，无论如何都会增加非破坏性更改。

以下示例阐明了 2.2 版的附加款式：

cx-mini-cart {@include forVersion(2.1) {background: blue;}
  @include forVersion(2.2) {background: deepskyblue;}
}

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 变量能够在文档的根或特定的选择器上进行定制。

Spartacus 蕴含大量可用于构建店面体验的组件。尽管商业可能是一种商品，但造型实质上是一个主观主题。不仅是色彩和字体的抉择，还有组件的空间，以及背景、线条等。

无论 Spartacus 提供什么，它都不能代表您的品牌或企业形象。出于这个起因，Spartacus 具备高度的灵活性，因而您能够扩大组件款式，或者齐全跳过它们。

因为 Spartacus 组件是在库中构建和散发的，因而无奈应用组件款式, 因为 Component 和 style 的定义，在 Spartacus 里是离开的。这些款式将被预处理并烘焙到组件库中。这意味着 CSS 规定不是可选的，也不是很容易定制的。

取而代之的是，在款式库中可抉择提供组件款式。您能够应用这些款式、扩大它们或齐全跳过它们并从头开始构建 CSS 规定。款式库和组件库之间的契约是通过（惟一的）组件选择器实现的。

为了使款式库中提供的 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 通过迭代配置的组件选择器来生成组件。

组件款式是可选的，因为它们是从款式库中提取的。因而，您可能心愿齐全禁用某些规范组件款式。要禁用规范组件款式，您能够将组件选择器增加到 $skipComponentStyles 列表。以下是演示从款式库中跳过两个规范组件的示例：

$skipComponentStyles: (cx-product-carousel, cx-searchbox);

如果您须要从头开始创立款式并且不想笼罩来自 Spartacus 款式库的特定款式规定，则跳过特定的组件款式可能会有所帮忙。

全局主题和组件款式对于在页面上出现组件最重要。然而，在页面上编排组件的整体布局是另一个重要的款式层。无关此图层的更多信息，请参阅页面布局。

更多 Jerry 的原创文章，尽在：” 汪子熙 ”:

关于sap:SAP-Spartacus-的-CSS-架构

SAP Spartacus Style 版本机制

SAP Spartacus CSS 技术

全局主题

Component Styles

Placeholder Selectors

Skipping Specific Component Styles

Page Layout Styles