随着前端技术不断发展，前端项目越来越复杂，代码也越来越难以维护。为了解决这个问题，前端社区引入了 BEM 命名规范。而 @fesk/react-bem 则是一个基于 BEM 规范的 React 组件库，它的出现为前端项目的代码维护提供了很好的解决方案。
什么是 BEM 规范
BEM 是 Block Element Modifier 的缩写，是一种前端开发的命名规范。其核心思想是将 HTML 元素的样式划分为模块化的块（Block）、元素（Element）和修饰符（Modifier），并通过不同的命名规则来让代码更加易读、易维护。
BEM 的命名规范如下：
- 块（Block）：代表一个独立的组件或模块，使用连字符（-）作为分隔符，例如：.block；
- 元素（Element）：代表块内的子元素，使用两个下划线（__）作为分隔符，例如：.block__element；
- 修饰符（Modifier）：代表块或元素的状态或属性，使用一个下划线（_）作为分隔符，例如：.block_modifier。
@fesk/react-bem 的使用方法
@fesk/react-bem 是一个基于 BEM 规范的 React 组件库，通过统一的命名规则，可以使得项目的样式更加易读、易维护。下面是 @fesk/react-bem 的使用方法：
安装
可以通过 npm 安装 @fesk/react-bem：
npm install --save @fesk/react-bem
示例
@fesk/react-bem 提供了 BEM class 名称生成的方法，首先需要 import 该库：
import { block } from '@fesk/react-bem';接下来可以使用 block 方法生成各种 BEM class 名称：
const myBlock = block('my-block');
const myBlockWithModifier = myBlock('with-modifier');
const myBlockElement = myBlock('element');
const myBlockElementWithModifier = myBlock('element', 'with-modifier');在 React 组件中使用 BEM class 名称：
function MyComponent() {
return (
<div className={myBlock()}>
<div className={myBlockElement()}></div>
</div>
);
}BEM class 名称的组合
有些时候，我们需要在一个元素中同时使用多个 BEM class 名称，@fesk/react-bem 也提供了简单的方法来实现这个功能。composeClassName 方法接受任意数量的 BEM class 名称，并返回他们的组合结果：
-- -------------------- ---- ------- ------ - ---------------- - ---- ------------------ ----- ------- - ------------------ ----- -------------- - ------------------- ----- ------------------- - ------------------------- ----- ----------------- - ----------------- ---------- ---------------------- ----------------- --
指定常量块属性
有些时候，我们需要为组件设置传递给 BEM class 的属性，默认是 block，也可以显式地指定其它的属性，例如：
const myBlock = block('my-block', 'data-my-block');这样生成的 BEM class 名称就是 data-my-block。
结束语
通过使用 @fesk/react-bem，我们可以遵循 BEM 规范，生成易读、易维护的样式代码。本文介绍了该库的安装和使用方法，并提供了示例代码。希望读者可以在项目中尝试使用该工具，并体验其带来的好处。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/fesk-react-bem