什么是 bemponent？
bemponent 是一个基于 BEM 命名规范的前端组件库，它可以帮助前端开发者高效地开发具有可复用性的组件。bemponent 实现了 BEM 命名规范的全部特性，如块(block)、元素(element)、修饰符(modifier)等，并支持组件化的开发方式。
如何使用 bemponent？
安装 bemponent
你可以使用 npm 安装 bemponent：
--- ------- --------- ------
引入 bemponent
假设你需要使用 bemponent 中的一个组件 button，你可以这样引入：
------ ------ ---- -------------------
使用 bemponent
bemponent 的组件名采用 BEM 命名规范，并以组件名称为块（block），在组件内部使用元素（element）来构建组件，同时支持修改器（modifier）来扩展组件的功能。
下面是一个例子，展示如何使用 bemponent 中的 button 组件：
---- --------------- ------- --------------------------- ------------ ------
------- -
-------- -
----------------- --------
------- -----
------ ------
-------- ---- -----
----------- -------
---------------- -----
-------- -------------
---------- -----
------- --------
------- -
----------------- --------
-
-
-上面的代码首先创建一个块 button，然后在块内部创建了一个元素 __inner，这个元素是实际的 button 元素。修改器可以像下面这样定义：
----------------- -
-------- ----
-------------- -
------- --------
--------------- -----
-
-这个修改器可以用来禁用 button。
命名约定
为了能够充分利用 bemponent，你需要遵循 bemponent 的命名约定。下面是 bemponent 的命名约定：
- b- 表示块（block）。
- __ 表示元素（element）。
- -- 表示修改器（modifier）。
- is- 表示状态（state）。
- has- 表示变体（variation）。
总结
bemponent 提供了一种基于 BEM 命名规范的组件化开发方式，能够帮助前端开发者高效开发具有可复用性的组件。使用 bemponent 需要遵循 bemponent 的命名约定，掌握好高效的 BEM 命名规范对于组件化开发至关重要。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60065b46c6eb7e50355dbeda