npm 包 css-utility-classnames 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在构建前端页面时，我们经常需要使用 CSS 类来设置样式，但在实际编写中，我们可能会发现有许多重复的样式，甚至会在不同的地方使用不同的类名来设置同样的样式。这极大地浪费了我们的时间和精力，同时也不利于代码的维护。如果能够使用一种工具来简便地设置样式，并避免冗余代码，这将能大大提高我们的开发效率和代码质量。

css-utility-classnames 正是这样一种 npm 包，它能够为我们提供一些常用的样式，同时也能用于避免样式的重复定义和冗余代码。在本篇文章中，我们将会讲解如何使用 css-utility-classnames 这个 npm 包，并且通过实例演示其用法。

安装

首先，我们需要安装 css-utility-classnames 这个 npm 包。可以使用以下命令在项目中安装：

npm install css-utility-classnames --save

也可以使用 yarn：

yarn add css-utility-classnames

使用

在安装好 css-utility-classnames 这个 npm 包后，我们就可以在项目中使用它来设置样式了。该 npm 包提供了几十个常用样式，我们可以按照需要将其添加到 HTML 文件的类属性中，从而达到设置样式的效果。

颜色

css-utility-classnames 提供了一组常用的颜色，包含颜色名称和值。

类名	颜色值
`.bg-primary`	`#0d6efd`
`.bg-secondary`	`#6c757d`
`.bg-success`	`#198754`
`.bg-danger`	`#dc3545`
`.bg-warning`	`#ffc107`
`.bg-info`	`#0dcaf0`
`.bg-light`	`#f8f9fa`
`.bg-dark`	`#212529`
`.bg-white`	`#fff`
`.bg-transparent`	`transparent`
`.text-primary`	`#0d6efd`
`.text-secondary`	`#6c757d`
`.text-success`	`#198754`
`.text-danger`	`#dc3545`
`.text-warning`	`#ffc107`
`.text-info`	`#0dcaf0`
`.text-light`	`#f8f9fa`
`.text-dark`	`#212529`
`.text-white`	`#fff`
`.text-muted`	`#6c757d`
`.text-reset`	`inherit`
`.text-decoration-`
`none`	`none`
`underline`	`underline`
`line-through`	`line-through`
`underline-`
`dotted`	`underline dotted`
`dashed`	`underline dashed`
`wavy`	`underline wavy`

对于每个类名，我们可以将其添加到 HTML 元素的 class 属性中，从而达到设置字体或背景颜色的效果，例如下面的示例中：

<div class="bg-primary text-white">
  这是一个背景为蓝色的区域，文字颜色为白色。
</div>

它会在页面上显示一个背景为蓝色、文字为白色的区域。

大小和宽高比

css-utility-classnames 还提供了一些大小和宽高比的样式，使我们可以更方便地实现元素的布局。

盒子大小

类名	大小值
`.w-{number}`	宽度为 `number` 个像素
`.h-{number}`	高度为 `number` 个像素
`.min-w-`
`0`	最小宽度为 0
`full`	宽度为 100%
`min`	最小宽度为 0
`max`	最大宽度为 100%

每个类名都可以用在同一元素的 class 属性中，并且可以根据需要组合。

宽高比

css-utility-classnames 还提供了一组宽高比的样式，我们可以使用它们来实现视频、图片等元素的响应式缩放。

类名	宽高比
`.aspect-ratio-`
`<ratio>{\|{-{modifier}}}`
`1x1`	1:1
`2x1`	2:1
`3x1`	3:1
`4x3`	4:3
`5x4`	5:4
`16x9`	16:9
`21x9`	21:9

例如下面的代码中：

<div class="aspect-ratio-16x9">
  <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>
</div>

它将会在页面上显示一个宽高比为 16:9 的iframe，并且会自适应大小。

版面布局

在编写前端页面时，我们经常需要使用布局样式，例如：向左或向右对齐、居中等等。css-utility-classnames 中也提供了一些布局样式。

类名	描述
`.float-right`	向右浮动
`.float-left`	向左浮动
`.float-none`	不浮动

`.d-{value}`	`display` 属性
`.d-inline`	`display: inline`
`.d-block`	`display: block`
`.d-none`	`display: none`

`.justify-content-{value}`	`justify-content` 属性。`value` 可选值包括：`start`, `end`, `center`, `between`, `around` 等
`.align-items-{value}`	`align-items` 属性。`value` 可选值包括：`start`, `end`, `center`, `baseline`, `stretch` 等

`.flex-nowrap`	不换行
`.flex-wrap`	换行

例如，下面的示例代码中：

<div class="d-flex justify-content-center">
  <h1>标题居中</h1>
</div>

它将会在页面上显示一个标题文字居中的区域。

样式修饰

在 css-utility-classnames 中，我们可以使用一些样式来修饰 HTML 元素的样式。

填充和边距

类名	描述
`.p-{value}`	在元素周围创建一个 `value` 像素大小的填充
`.py-{value}`	在元素上下添加 `value` 像素的填充
`.px-{value}`	在元素左右添加 `value` 像素的填充
`.pt-{value}`	在元素顶部添加 `value` 像素的填充
`.pb-{value}`	在元素底部添加 `value` 像素的填充
`.pl-{value}`	在元素左侧添加 `value` 像素的填充
`.pr-{value}`	在元素右侧添加 `value` 像素的填充

例如，下面的示例代码中：

<div class="p-4">
  <h1>标题</h1>
  <p>这是一个段落</p>
</div>

它将会在页面上显示一个带有 4 像素内边距的区域，包含一个标题和一个段落。

边框

css-utility-classnames 还提供了一些不同样式的边框，我们可以使用它们来修饰 HTML 元素的样式。

类名	描述
`.border-{value}`	元素周围创建一个 `value` 像素大小的边框
`.border-top-{value}`	在元素顶部创建一个 `value` 像素大小的边框
`.border-bottom-{value}`	在元素底部创建一个 `value` 像素大小的边框
`.border-left-{value}`	在元素左侧创建一个 `value` 像素大小的边框
`.border-right-{value}`	在元素右侧创建一个 `value` 像素大小的边框

每个样式都可以用在同一元素的 class 属性中，并且可以根据需要组合。

例如，下面的示例代码中：

<div class="p-4 border border-secondary">
  <h1>标题</h1>
  <p>这是一个段落</p>
</div>

它将会在页面上显示一个带有 4 像素内边距和灰色边框的区域，包含一个标题和一个段落。

结论

css-utility-classnames 是一个非常实用的 npm 包，通过使用其中提供的样式，我们可以简化页面的 CSS 代码，同时也能够提高代码的可维护性。本文介绍了该 npm 包的基本使用方式，并且提供了一些示例代码，希望这些内容对读者有所启发。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60055ead81e8991b448dc29e