简介
在开发 React 应用时，BEM 是一种很流行的 CSS 架构方式。BEM 是块、元素、修饰符的缩写，它的思想是将页面组件拆分成最小的可复用单元，每个单元都是独立的，有自己的类名和样式表。在这里，我们将介绍使用 npm 包 react-bem-helper 来实现 BEM 架构的方式。
安装
在项目的根目录中，使用以下命令来安装 react-bem-helper：
npm install react-bem-helper --save-dev
使用
基本用法
react-bem-helper 提供了一个 BEM 类，通过此类，我们可以方便地操作 BEM 的相关特性。下面是一个例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --- - ---- -------------------
----- ------ - -- ------ ----- -------- -- -- -
----- ---------- - --- -------------
---------------------------
--------------------------
------ -
------- -----------------------
----------
---------
--
--
------ ------- -------在这个例子中，我们使用了 BEM 类的 modifier 方法来操作修饰符。
嵌套的 BEM
有时候，我们需要在一个 BEM 格式的类名中嵌套另外一个 BEM 格式的类名，react-bem-helper 也提供了相应的 API：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --- - ---- -------------------
----- ---- - -- -------- -- -- -
----- ---------- - --- ------------
----- -------------- - ----------
----------------
------------------------
------ -
---- -----------------------
--- ---------------------------
----------
-----
------
--
--
------ ------- -----在这个例子中，我们使用了 BEM 类的 element 和 modifier 方法来实现 BEM 的嵌套。
使用变量
有时候，我们需要在多个地方重复使用一个特定的类名，而不想多次写出该类名。这时候，react-bem-helper 可以让我们使用变量，来解决这个问题：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --- - ---- -------------------
----- ------ - -- ------ ----- -------- -- -- -
----- ---------------- - --- --------------
----- ---------------------- - --------------------------------------------
----- --------------------- - ------------------------------------------
------ -
------- ------------------------------- ------------------------- ---------------------------
----------
---------
--
--
------ ------- -------在这个例子中，我们使用了 BEM 的实例，以及修饰符来创建一个类名，并使用这个类名来渲染组件。
总结
在本文中，我们介绍了在 React 应用中使用 BEM 架构的方法，以及使用 npm 包 react-bem-helper 的相关 API。在实际开发中，使用 BEM 可以帮助我们创建出结构化、易于调试的 CSS 代码。通过使用 react-bem-helper，我们可以更方便地管理 BEM 的类名结构，提高代码的复用性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/134799