简介
在前端开发中，BEM（块、元素、修饰符）命名法已经成为了一种很流行的命名方式。BEM 可以使 HTML 结构更易于阅读和维护，并且可以减少选择器的副作用。然而，在应用 BEM 命名规范时，我们必须编写大量的样式代码，来控制每个块、元素和修饰符的样式。这项工作通常非常繁琐，并且难以维护。为了解决这个问题，我们有一个 npm 包叫做 @bem-react/classnames。
@bem-react/classnames 是一个 JavaScript 库，它提供了一种方便的方式来使用 BEM 命名规范。使用此库，我们可以很容易地设置和管理元素和修饰符的类名。
安装
@bem-react/classnames 可以通过 npm 包管理器进行安装。要安装 @bem-react/classnames，请在终端中运行以下命令：
npm install --save @bem-react/classnames
使用
假设我们有一个 BEM 块叫做 button，其中包含一个 BEM 元素 text 和两个 BEM 修饰符 primary 和 disabled。我们可以使用 @bem-react/classnames 设置和管理它们的类名。
首先，我们需要导入 @bem-react/classnames 包：
import cn from "@bem-react/classnames";
然后，我们可以使用这个库来生成类名，例如：
const buttonClass = cn("button", {
primary: true,
disabled: false
});
const textClass = cn("button", "text");在上面的示例中，我们将 button 块的类名设置为 button_primary，因为 primary 修饰符被设置为 true。此外，我们还将 text 元素的类名设置为 button__text。
现在，我们可以在 React 组件中使用这些类名，例如：
-- -------------------- ---- -------
------ ----- ---- --------
----- -------- - -- ---- -- -- -
----- ----------- - ------------ -
-------- -----
--------- -----
---
----- --------- - ------------ --------
------ -
------- ------------------------
----- ----------------------
------
-------
---------
--
--在上面的示例中，我们使用 buttonClass 和 textClass 来设置按钮和文本的类名。
动态 BEM 类名
@bem-react/classnames 也可以用于设置动态 BEM 类名。例如，我们可能需要根据用户输入动态更改按钮颜色。在这种情况下，我们可以使用以下代码：
const buttonColor = "blue";
const buttonClass = cn("button", {
[buttonColor]: true,
disabled: false
});在上面的代码中，我们将 buttonColor 变量设置为 blue，并将其用作修饰符。此时，按钮的类名将是 button_blue。
总结
@bem-react/classnames 是一个方便的 JavaScript 库，它可以为我们提供更简单的方法来实现 BEM 命名规范。使用此库，我们可以轻松地设置和管理元素和修饰符的类名，并减少我们的样式代码。此外，通过使用动态 BEM 类名，我们还可以轻松地实现动态样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb238b5cbfe1ea0611126