前言
在现代 Web 开发中，前端工程师通常会使用许多工具和库。其中之一就是 NPM 包。通过使用 NPM 包，开发人员可以轻松地共享代码，降低代码复杂性，并加速开发速度。 Burnish-styles 是一个能够让前端人员快速开箱即用的样式库，它为开发人员提供了一组简单、一致的 CSS 类，使得构建精美的 UI 界面变得轻而易举。
在本文中，我们将会学习如何使用 Burnish-styles，了解其在 Web 开发中的优势和使用场景。
Burnish-styles 概述
Burnish-styles 是一个轻量级的 CSS 库，它提供了一组标准化的 CSS 类，帮助开发人员构建 UI 界面。Burnish-styles 通过使用类似于 BEM 的命名约定，使得 CSS 类易于理解和使用，同时也减少了 CSS 文件的大小，减轻了页面的负担。
Burnish-styles 是以 Sass 和 SCSS 为基础构建的，这使得开发人员可以在 Burnish-styles 基础上进一步修改和扩展样式，满足各自的具体需求。
安装 Burnish-styles
要使用 Burnish-styles，需要先安装它。在命令行中运行如下命令：
npm install burnish-styles
使用 Burnish-styles
我们可以通过直接引入 Burnish-styles CSS 文件或使用 Sass 和 SCSS 来使用 Burnish-styles。
例如，为了在 HTML 文件中使用 Burnish-styles，我们可以在 <head> 中添加如下代码：
<head> <link rel="stylesheet" href="./node_modules/burnish-styles/dist/burnish-styles.css"> </head>
然后，就可以使用 Burnish-styles 的 CSS 类了。例如，为了创建一个带有红色背景色的按钮，我们可以使用 btn xs red 类：
<button class="btn xs red">Click me!</button>
在 Sass 或 SCSS 中使用 Burnish-styles，我们可以将 Burnish-styles 导入到自己的源文件中，然后使用它的样式类。例如，为了创建一个匹配 Burnish-styles 的按钮，可以使用如下 Sass 代码：
-- -------------------- ---- ------- -- -- -------------- ------- ------------------------------------------------------- -- ---- ------- - ------- ----- ------- ---- ------- ----- -
然后在 HTML 中将带有样式的类添加到按钮上：
<button class="my-btn">Click me!</button>
Burnish-styles 核心概念
为了真正理解 Burnish-styles，让我们来看一下它的核心概念。
命名约定
Burnish-styles 类命名约定类似于 BEM（块，元素，修饰符）。它将 UI 元素分为块、元素和修饰符。
- 块是一个完整的独立元素，它代表了一个拥有外观和行为的独立部分。例如，一个按钮或者一个表单就可以作为一个块。
- 元素是组成块的一部分。例如，按钮里面的文字或者表单中的输入框就可以作为一个元素。
- 修饰符用于修改或扩展块或元素的外观或行为。例如，一个带有圆角的按钮或者一个输入框的错误状态就可以作为一个修饰符。
尺寸
Burnish-styles 中的尺寸是基于一系列预定义的 CSS 类，这些类可以在大多数元素上使用。这些尺寸类以 xs、sm、md、lg 和 xl 命名，并逐步增加元素的大小。例如，.xs 类适用于按钮和文本输入框，.md 类适用于大型元素，如卡片和表单。
介绍了 Burnish-styles 的几个核心概念，接下来我们将具体介绍 Burnish-styles 中的一些常用类。
常用类
btn
.btn 类用于创建一个基本按钮，它具有轮廓和透明度适配的形状和大小。
btn 类的修饰符
.primary：这会向按钮添加主要颜色，可以用作一个明显的操作。.secondary：这会向按钮添加一个次要颜色，可以用作为更具体的操作，如过滤器。.outlined：这会将按钮变成一个轮廓按钮。.squared：这会将按钮变成方形。
按钮尺寸
可以使用 Burnish-styles 的 CSS 尺寸类，例如 .xs、.md 等。
例如：
<button class="btn xs primary">Primary xs btn</button> <button class="btn md secondary square">Secondary square md btn</button>
输入框元素
Burnish-styles 提供了用于文本输入框、下拉菜单、复选框和单选框的 CSS 类。
文本输入框
.input 类用于创建文本框，具有一致的轮廓和透明度适配的形状和大小。
下拉菜单
.select 类可以用于创建带有下拉列表的下拉菜单。它可以用于 HTML 中的 select 元素，或者与自定义解决方案结合使用。
复选框和单选框
.checkbox类可以用于创建可选择的复选框。.radio类可以用于创建单选框。
输入框元素的修饰符
可以使用以下修饰符改变它们的外观：
.disabled，[disabled]属性检测到被绑定的输入。.checked和:checked，用于呈现选中的状态。.focus，仅在输入框被聚焦时应用。
例如：
<label class="checkbox"> <input type="checkbox" class="checkbox" checked disabled /> Many boxes checked </label> <label class="radio"> <input type="radio" class="radio" checked /> Choose once </label>
卡片和容器
Burnish-styles 提供了一些用于创建卡片和容器的 CSS 类。
容器
.container 类提供了一个容器来组织页面布局。
卡片
.card 类可以用于创建卡片，同时带有管理员操作和流布局。
卡片的修饰符
.shadow：这会给卡片添加一个阴影。.rounded：这会给卡片添加圆角。.bordered：这会给卡片添加一个轮廓。
例如：
<div class="container">
<div class="card">
<h2>Card Title</h2>
<p>Card Text</p>
</div>
</div>扩展 Burnish-styles
如果您需要某个 Burnish-styles 中不存在的样式或调整 Burnish-styles 的样式，可以直接在自己的项目中创建新的 Sass 文件，并在其中导入 Burnish-styles。
例如，在我的 main.scss 中，我可以将 Burnish-styles 导入其中，并创建自己的样式：
-- -------------------- ---- ------- -- -- -------------- ------- ------------------------------------------------------- -- ------- ------ - ------- ------ ----------------- ----- -------- ----- -
在 HTML 文件中添加所需的类即可：
<div class="container">
<div class="panel">
<h2>My Panel</h2>
<p>Some text</p>
</div>
</div>结论
因为 Burnish-styles 提供了一组简单、一致的 CSS 类，可以帮助前端开发人员快速构建 UI 界面。学习使用 Burnish-styles，不但可以让 Web 开发变得更加方便，而且还可以通过向自己的样式中添加扩展，满足不同开发人员的需求。
希望这篇 Burnish-styles 使用教程给您带来了一些帮助，可以在您的下一个 Web 开发项目中得到使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8fccdc64669dde5778