在前端开发中，我们常常需要使用一些基础的CSS样式，例如按钮、表格等；但是手写这些样式很耗费时间和精力。为了提高开发效率，我们可以搜索找到适合的CSS库或者使用已有的轻量级CSS npm包。在这里，我介绍一个很好用又免费的 npm 包 nrmlzd，该包可以让你快速地创建现代化的 CSS 样式。
安装
在使用 nrmlzd 之前，你需要先安装它，你可以在终端中输入以下命令：
npm install nrmlzd
安装完成后，你就可以开始使用它了。
使用
为了使用 nrmlzd，你需要在HTML文档头部引入它的CSS文件：
<link rel="stylesheet" href="./node_modules/nrmlzd/styles.min.css">
在样式表中使用 nrmlzd：
btn {
@extend .btn;
color: red;
}你可以根据自己的需要在样式表中引入 nrmlzd 类名：
<button class="nrmlzd-btn"></button>
在使用类名之前，你需要确保按照上文的方法正确引入 nrmlzd 的 CSS 文件。
nrmlzd 包包含了许多现成的样式，包括：按钮、表格、图标等等。在这里我将介绍一些常用的样式。
按钮
使用.nrmlzd-btn类创建一个按钮：
<button class="nrmlzd-btn">Click me</button>
此时你会发现，一个具有默认样式的按钮已经出现在页面上了。
表格
使用.nrmlzd-table类创建一个简单的数据表格：
-- -------------------- ---- -------
------ ---------------------
-------
----
-----------
-------------
------------
-----
--------
-------
----
----------
------------
-----------
-----
----
----------
--------------
-----------
-----
----
----------
------------
-----------
-----
--------
--------上述代码会创建一个简单的数据表格，其中包含了表头和表格数据，而且该表格已经具备了 nrmlzd 的默认样式。
图标
和大多数现代化 CSS 库一样，nrmlzd 同样提供了一些常用的图标。你只需要在HTML文档中使用图标的 class 名称即可：
<i class="nrmlzd-icon nrmlzd-icon-search"></i>
此时你会发现，一个带有搜索图标的元素已经出现在页面上了。
总结
nrmlzd 是一款很棒的 npm 包，它提供了许多常用的、现代化的 CSS 样式，让前端开发者花费更少的时间在样式设计上。上面介绍的只是 nrmlzd 的部分功能，你可以去它的官方网站了解更多的样式和文档：https://nrmlzd.dev/ 。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005673881e8991b448e3bcb