npm 包 @fesk/bem-js 使用教程

阅读时长 4 分钟读完

BEM(Block Element Modifier)是一种前端开发中常用的命名方式,它可以让我们更好地组织 HTML 和 CSS,提高代码可维护性和复用性。在 BEM 中,每一个 DOM 元素都可以被当作一个“块”(Block),块里包含多个“元素”(Element),元素可以被分成多个“修饰符”(Modifier)。使用 BEM 命名方式可以让我们清晰地表示出元素之间的层级关系和样式特征,并且方便多人协同开发。

但是在实际工作中,我们经常会遇到需要频繁手动拼接 BEM 类名的情况,这不仅容易出错,还会浪费时间。为了提高开发效率,社区中出现了许多自动化生成 BEM 类名的 npm 包。其中,@fesk/bem-js 是一个比较常用的 npm 包,下面将介绍它的使用教程。

安装

在终端中使用 npm 安装 @fesk/bem-js 即可:

使用

使用 @fesk/bem-js 的过程分为两步:首先需要创建一个 BEM 命名环境(Block),然后使用该环境中提供的 API 来生成对应的 BEM 类名。

创建 Block

在使用 @fesk/bem-js 之前,我们需要先创建一个 BEM 命名环境。在 @fesk/bem-js 中,可以使用 BEM.createBlock 方法来创建一个 Block,示例如下:

其中,'my-block' 是该 Block 的名字。创建完成之后,我们可以使用 block.getElementblock.getModifier 方法来分别创建 Element 和 Modifier。

创建 Element

在一个 Block 中,每一个 DOM 元素都可以被当做一个 Element。在 @fesk/bem-js 中,我们可以使用 block.getElement 方法来创建一个 Element,示例如下:

其中,'my-element' 是该 Element 的名字。创建完成之后,我们可以使用它提供的 API 来生成对应的 BEM 类名。

创建 Modifier

在 BEM 中,一个 Modifier 可以用来添加或者修改元素的一些样式特征。在 @fesk/bem-js 中,我们可以使用 block.getModifier 方法来创建一个 Modifier,示例如下:

其中,'big' 是该 Modifier 的名字。创建完成之后,我们可以使用它提供的 API 来生成对应的 BEM 类名。如果需要在 Modifier 的值中使用变量,则可以在 BEM 类名中使用占位符 {}。示例如下:

最终结果

使用 @fesk/bem-js 之后,我们的代码可以更加清晰易懂,示例如下:

-- -------------------- ---- -------
------ --- ---- ---------------

----- ----- - ----------------------------
----- ------ - ---------------------------
----- ----- - --------------------------
----- ------- - ----------------------------
----- ------------- - -------------------------- - ------ ----- ---

-- -- --- --
----- ---------- - ---------------------
----- ----------- - ----------------------
----- ---------- - ---------------------
----- ------------ - -----------------------
----- --------------- - ---------------------------------------------------

总结

通过本文的介绍,我们了解了如何使用 @fesk/bem-js 来自动生成 BEM 类名,提高前端开发的效率。使用该 npm 包可以让我们更加专注于业务逻辑的实现,避免手动拼接类名带来的错误和时间浪费。同时,这种使用方式也符合 BEM 命名方式的规范,使得我们可以更好地组织 HTML 和 CSS,提高代码可维护性和复用性。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/5eedaa31b5cbfe1ea06103ab

纠错
反馈