在前端开发中，我们常常需要处理页面元素的命名，以及相应的样式问题。BEM（Block Element Modifier）是一种流行的命名规范，可以帮助我们更好地组织代码并减少不必要的冗余。而 npm 包 bembi，就是用来帮助我们使用 BEM 命名规范的工具。
安装
bembi 可以通过 npm 进行安装，使用以下命令：
npm install bembi
使用
基本使用
bembi 可以为我们自动地生成符合 BEM 命名规范的样式和 HTML 类名。首先，我们需要在 HTML 中引入 bembi：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
------------ -------------
------- -----------------------------------------------------
-------
------
---- --------------
---- ----------------------
---- --------------------------------
------
-------
-------这里使用了 unpkg 的 CDN 加载 bembi。
接下来，我们就可以在 JavaScript 中使用 bembi：
-- -------------------- ---- ------- ----- - -- -- - - - -------- -- -- ----- -- ----- ---------- - ----------- -- -- ------- -- ----- ------------ - ---------- ----------- -- -- -------- -- ----- ------------- - ---------- ---------- ------------ -- -------- ----- ------- - --------------------------------- ---------------------------------- ----- -------- - ------------------------------------- ---------------------------------------- --------------------------------------- ---------------
这样，我们就可以借助 bembi 在 JavaScript 中生成符合 BEM 命名规范的类名，并在 HTML 中应用它们。
带有嵌套的块
当块有嵌套时，在 JavaScript 中生成符合 BEM 命名规范的类名可能会变得有些复杂。但是，bembi 可以为我们轻松地处理嵌套块。
<div class="block">
<div class="block__inner">
<div class="block__inner--element"></div>
</div>
</div>-- -------------------- ---- ------- ----- - -- -- - - - -------- ----- --------------- - ----------- ----- --------------- - ---------- --------- ----- ------------ - ---------- -------- ----------- -- -------- ----- ------------ - --------------------------------- -------------------------------------------- ----- ------------ - -------------------------------------------- -------------------------------------------- ----- --------- - ----------------------------------------------------- --------------------------------------
变量
我们也可以在 bembi 中定义变量，以便在生成类名时更方便地使用它们：
-- -------------------- ---- ------- ----- - -- -- -- - - - ------- ------ ------ ----- ------- --- ----- ---------- - ----------- ----- ------------ - ---------- ----------- ----- ------------------ - ---------- ---------- ------------ ----- ----------------- - ---------- ---------- ----------- -- -------- ----- ------- - --------------------------------- ---------------------------------- ----- --------- - ---------------------------------- ------------------------------------- ------------------- -------------------
这里我们定义了两个变量 color 和 size，并在生成类名时使用 v() 方法来引用它们。这样，在修改变量时，我们可以很容易地通过修改配置来更改整个应用程序的样式。
总结
bembi 是一个简单实用的工具库，可以为我们提供设计和管理 BEM 类名的方法。通过使用 bembi，我们可以更好地组织代码，并减少不必要的冗余。希望这篇文章可以帮助你更好地使用 bembi，提高你的前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055e6581e8991b448dbc88