如果你是一个前端工程师，你可能已经使用过 styled-components 这一 React 的样式库，它可以让你在 React 应用程序中编写 CSS，并且可以让你在组件内部轻松地定义和重用样式。但是，当你写更大的应用程序并且需要更好地组织你的 CSS 时，BEM（块元素修饰符） 可能会更适合你的需求，它是一种 CSS 命名约定，可以使你的 CSS 更具可维护性和可复用性。
在本文中，我们将介绍 npm 包 styled-components-bem，它将 BEM 与 styled-components 集成在一起，可以让你更好地组织你的 CSS。
安装和使用
在使用 styled-components-bem 之前，你需要先安装 styled-components。如果你还没有安装，可以运行以下命令：
npm install styled-components
然后，你可以安装 styled-components-bem：
npm install styled-components-bem
styled-components-bem 提供了一些辅助函数，可以让你更方便地定义 BEM 样式。我们来看一个简单的例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --- - ---- ------------------------
------ ------ ---- --------------------
----- --------- - -----------
---------------
---------- -
------------ -----
-
----------- -
------ ----
-
--
--
------ ------- -------- ----- -
------ -
---------- ------------------
---- --------------------------------- ------------
---- ------------------------- --------------------------
------ ----- ---- ---------
------
------------
--
-在上面的示例中，我们首先导入必要的库，然后定义一个 StyledDiv 组件，并使用 bem 辅助函数定义了一个 BEM 样式。样式由两个块组成：&__element 和 &--modifier。然后我们通过组件的类名来应用这些样式，另外我们将 block 作为 StyledDiv 的类名，这样 bem 就知道将这些样式应用于哪个块。
这里有两个组件，一个 div，另一个是带有 --modifier 的 div。使用 BEM 规则，我们可以将它们放入一个块 block 中，然后应用样式。
BEM 样式
BEM 规则中有三个元素：块（block）、元素（element）和修饰符（modifier）。
块是一个独立的实体，可以在网页上出现任意多次。例如，在一个导航条中，每个导航项都可以组成一个块。
元素是块中的一部分，如导航条的文字或菜单项的图标等。元素总是跟随在它所属的块后面，然后由两个下划线（__）来连接。
修饰符用于指示块或元素的某个状态或变化。修饰符是通过两个连字符（--）来连接的。例如，我们可以使用一个名为 inactive 的修饰符来显示一个导航项被禁用的状态。
在 BEM 中，使用这些元素名称定义类名：.block 表示一个块，block__element 表示块中的元素，block--modifier 表示块的修饰符。
styled-components-bem 辅助函数
styled-components-bem 提供了一些辅助函数，可以让你更方便地定义 BEM 样式。这里是一些常用的辅助函数：
bem(block)：定义一个新的块，块名为block。返回一个模板字符串，你可以在其中定义元素和修饰符。bem(element)：定义一个新的元素，元素名为element。返回一个模板字符串，你可以在其中定义修饰符。bem.modifier(modifier)：定义一个修饰符，修饰符名为modifier。返回一个模板字符串，你可以在其中定义样式。
这些函数应该在样式定义中一起使用，以定义你的块、元素和修饰符。例如bem("block") 定义块，bem("block__element") 定义块中的元素。有了这些辅助函数，你可以更简单地编写 BEM 样式。
总结
styled-components-bem 是一个很好的 npm 包，可以让你更好地组织你的 CSS，使你的应用程序更具可维护性和可复用性。通过使用它提供的 BEM 辅助函数，你可以更方便地定义 BEM 样式，让你的 CSS 更加简洁易读。如果你正在为你的 React 应用程序编写 CSS，不妨试试 styled-components-bem。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672593660cf7123b3637f