什么是 @microsoft/fast-components-class-name-contracts-base？
@microsoft/fast-components-class-name-contracts-base 是一个 npm 包，在使用 fast 组件库时必要的一个辅助组件，主要用于生成 fast 组件库中准确、一致的 CSS class 名称，以确保组件在不同场景下的一致性和样式准确性。
该 npm 包中的 ClassNameContract 构造函数用于生成特定组件类的规范的 CSS class 名称，提供了一致的类名称生成方法，使 fast 组件库中所有使用了 ClassNameContract 的组件的 class 名称风格保持一致，这样可以减少代码中的重复工作，使得代码更加简洁和易于维护。
如何使用 @microsoft/fast-components-class-name-contracts-base
安装
首先需要在项目中安装该 npm 包：
npm install @microsoft/fast-components-class-name-contracts-base
引入
在需要使用该 npm 包的地方，将其引入到代码中：
import { ClassNameContract } from '@microsoft/fast-components-class-name-contracts-base';生成特定组件的 CSS 类名称
使用 ClassNameContract 构造函数创建一个新的类，该类将生成特定类型组件的规范 class 名称：
const myButtonClassNameContract = new ClassNameContract('my-button');其中，my-button 是指生成的组件 class 名称的前缀，该名称可以根据各自项目的需要自定义。
在组件样式中，可以通过调用 ClassNameContract 中的方法生成使用一致的 CSS class 名称：
myButtonClassNameContract.create('root')生成的 class 名称为：my-button__root（其中 my-button 为指定的组件类名称）。
CSS class 名称的变体
在一些场景下，需要对组件的某些状态或变量进行样式调整，此时可以使用 ClassNameContract 中的变体方法生成新的 class 名称。例如，可以通过如下方法生成 "my-button__root_disabled" 的 class 名称：
myButtonClassNameContract.create('root', {disabled: true})生成的 class 名称：my-button__root_disabled。
示例代码
以 fast 库中的 button 组件为例，在组件中使用 ClassNameContract 构造函数定义 class 名称，以确保其在各自应用场景中一致：
-- -------------------- ---- -------
------ - ---------- ---- - ---- --------------------------
------ - ------------ -- ------ - ---- ------------------
------ - ---------- - ---- -----------------------------
------ - -------- - ---- ------------------------
------ - ----------------- ------------- - ---- -------------------
------ - ----------------- - ---- -------------------------------------------------------
----- ----------------------- - --- ----------------------------
------------
---- --------------
-------
--------- -------------
-----------
------------ ------ - ------ --------- ---- ------- - ---
-------------
----- ------------- ------------ ----------------------------------------------------------
----- ------------ ---------- --------------------------------------------------------
------------
-
--
------ ----- ------ ------- ---------- -
---
-在该代码中，fast-button 组件使用 ClassNameContract 构造函数定义其 class 名称，调用 create 方法时生成规范的 class 名称，确保在各个使用场景中一致，方便进行样式设计和代码维护。
总结
通过 @microsoft/fast-components-class-name-contracts-base npm 包，我们可以使用 ClassNameContract 构造函数生成特定组件类型规范的 CSS class 名称，以确保在 fast 组件库中各个组件的样式和 class 名称风格一致，避免了冗余代码和样式不一致的问题，使前端代码更加优雅和易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedac66b5cbfe1ea0610a0e