前言
BEM（块-元素-修饰符）是一种很流行的前端代码风格，它能够更好地组织 HTML 和 CSS，并提高代码的复用性和可维护性。然而，手动编写 BEM 类名有时会很不方便，因此我们推荐使用 npm 包 @knaydenov/bem 来简化这个过程。
安装
安装 @knaydenov/bem 可以使用 npm 或 yarn。
npm i @knaydenov/bem
或
yarn add @knaydenov/bem
使用
初始化
在使用 @knaydenov/bem 之前，需要先初始化 BEM 系统。打开你的代码入口文件，通常是 index.js 或 app.js，或者你使用的框架的入口文件，然后在文件顶部添加以下代码：
import { initBem } from '@knaydenov/bem';
initBem();这将初始化 BEM 系统并创建 $bem 变量。示例：
-- -------------------- ---- -------
----- ---- - -
------- -
------ --------
--
------------- ----- -
------ -------------------------- - ------------------------
--
------------------ -
----- ------ - ---
--- ------ ------ ------ -- --------------------- -
-- ------- -
----------------------------------------
-
-
------ ------------- ---
--
--
----------创建块
要创建一个块，需要调用 $bem.block() 方法。示例：
const b = $bem.block(); // "block"
创建元素
要在块内创建元素，需要调用 $bem.element() 方法。示例：
const e = $bem.element('elem'); // "block__elem"还可以添加修饰符：
const e = $bem.element('elem', { mod: true }); // "block__elem block__elem--mod"创建修饰符
要创建一个修饰符，只需要在类名后面添加修饰符名称。示例：
const m = 'block--mod';
示例
-- -------------------- ---- -------
---- ------------------------------- - ------- ---- -----
---- --------------------------------
---- ---------------
------
---- -------------------------------
----
--- --------------------------------- - ------- ---- -----
-- -----------------
-----
--- ------------------------------------
-- -----------------------
-----
--- ------------------------------------
-- ---------------------------
-----
-----
------
------总结
使用 @knaydenov/bem 可以快速创建符合 BEM 规范的类名，提高代码的可读性和可维护性。我们推荐将其与你的前端框架一起使用，以便更好地组织你的 HTML 和 CSS 代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b6151ab1864dac67300