在前端界，我们经常需要使用各种各样的 CSS 样式，比如按钮、表单、菜单等等。这些样式笔者在实践中总结归类出来，基于这个思路，笔者写了一个 npm 包 css-fruit，收录了各种常见的 CSS 样式，本教程将会介绍如何使用 css-fruit。
准备工作
在使用 css-fruit 之前，我们需要先确定环境是否已经准备好。
首先需要安装 Node.js 和 npm，可以通过以下步骤来安装：
- 在 Node.js 官网 下载对应平台的安装程序；
- 按照安装程序的提示进行安装，一般安装过程很简单，直接“下一步”即可。
安装完成之后，在终端（Windows 中为命令提示符）中输入以下命令来查看是否安装成功：
node -v npm -v
如果显示出相应的版本号，则说明安装成功。
下载 css-fruit
在终端中输入以下命令即可下载 css-fruit：
npm install css-fruit
安装成功后，我们就可以在项目中使用 css-fruit 提供的样式了。
使用示例
以下是一个使用 css-fruit 的示例：
-- -------------------- ---- -------
--------- -----
------
------
---------------- ------------
----- ---------------- -----------------------------------------------------
-------
------
---- --------------- -------------------------- ------------
---- --------------- ------------------------------ ------------
-------
-------在这个示例中，我们使用了 css-fruit 提供的两种样式：Primary Button 和 Secondary Button。在这里，我们只需要在 HTML 中引入 css-fruit 预设好的样式表，然后通过类名来使用这些样式。
定制样式
虽然 css-fruit 已经提供了一些常见的样式，但我们在实际开发中还可能需要根据自己的需求自定义一些样式。在这种情况下，我们可以自己定制样式，在 css 中定义类名，然后在 HTML 中使用这些类名。
以下是一个自定义样式的示例：
-- -------------------- ---- ------- ----------------- - ----------------- -------- ------------- -------- ------ -------- - ----------------- - ----------------- -------- ------------- -------- ------ -------- -
在这个示例中，我们定义了两个样式：.c-alert--success 和 .c-alert--warning，分别用于表示成功和警告两种状态的提示框。
在 HTML 中使用自定义样式：
<div class="c-alert c-alert--success">操作成功！</div> <div class="c-alert c-alert--warning">操作有风险，谨慎操作！</div>
总结
本教程介绍了使用 npm 包 css-fruit 的步骤，并且提供了实际的示例。css-fruit 使用方便简单，包含的样式非常丰富，能够满足大多数需求。如果你在使用 css-fruit 中有任何问题，欢迎在评论区提出，我们一起讨论。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66182