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

什么是 bemponent？

bemponent 是一个基于 BEM 命名规范的前端组件库，它可以帮助前端开发者高效地开发具有可复用性的组件。bemponent 实现了 BEM 命名规范的全部特性，如块(block)、元素(element)、修饰符(modifier)等，并支持组件化的开发方式。

如何使用 bemponent？

安装 bemponent

你可以使用 npm 安装 bemponent：

npm install bemponent --save

引入 bemponent

假设你需要使用 bemponent 中的一个组件 button，你可以这样引入：

import Button from 'bemponent/button';

使用 bemponent

bemponent 的组件名采用 BEM 命名规范，并以组件名称为块（block），在组件内部使用元素（element）来构建组件，同时支持修改器（modifier）来扩展组件的功能。

下面是一个例子，展示如何使用 bemponent 中的 button 组件：

<div class="button">
  <button class="button__inner">Click me!</button>
</div>

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

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

上面的代码首先创建一个块 button，然后在块内部创建了一个元素 __inner，这个元素是实际的 button 元素。修改器可以像下面这样定义：

.button--disabled {
  opacity: 0.5;

  .button__inner {
    cursor: default;
    pointer-events: none;
  }
}

这个修改器可以用来禁用 button。

命名约定

为了能够充分利用 bemponent，你需要遵循 bemponent 的命名约定。下面是 bemponent 的命名约定：

b- 表示块（block）。
__ 表示元素（element）。
-- 表示修改器（modifier）。
is- 表示状态（state）。
has- 表示变体（variation）。

总结

bemponent 提供了一种基于 BEM 命名规范的组件化开发方式，能够帮助前端开发者高效开发具有可复用性的组件。使用 bemponent 需要遵循 bemponent 的命名约定，掌握好高效的 BEM 命名规范对于组件化开发至关重要。

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