这是为嵌套元素编写 BEM 的正确方法吗？

Question

所以我一直在用我认为正确的BEM编写我的 classNames 。像这样的东西：

<div className="article">
    <div className="article__textbox">
        <h1 className="article__textbox--heading"></h1>
        <p className="article__textbox--subheading"></p>
        <span className="article__textbox--author"></span>
    </div>
</div>

看看我是如何拥有文本框的，然后我在里面的所有内容都给出了 2 个破折号？我最近发现这是无效的 BEM，现在我需要知道应该如何命名嵌套的东西。例如，我应该为标签命名什么<p>？

Answer 1

BEM的关键点是元素（__类名中前缀为 ）和修饰符（前缀为--）之间的区别：

\n

\n

元素
\n块的一部分，没有独立含义，\n在语义上与其块相关。

\n

修饰符
\n块或元素上的标志。使用它们来改变外观\或行为。

\n

\n

在您的示例中，--heading,--subheading和--author都不是元素的修饰符 - 它们是元素。如果出于某种原因，您决定对这些元素应用实际的修饰符（例如highlighted或clickable），那么您最终要么完全重写类名，要么出现一些奇怪的情况，例如article__textbox--heading--clickable.

\n

现在，我在这里看到的真正问题是“好吧，它不是修饰符，但是我应该如何处理位于其他元素内部的元素？”换句话说，哪些类名应该应用于嵌套在其他元素中的元素？这个问题实际上在BEM FAQ中得到了回答：

\n

\n

问：如果我的块具有复杂的结构并且其元素\n是嵌套的，我该怎么办？CSS 类 block__elem1__elem2__elem3 看起来很吓人。

\n

A：根据BEM方法，块结构应该是扁平化的；您不需要反映块的嵌套 DOM 结构。因此，本例的类名将是：

\n

\n

.block {}\n.block__elem1 {}  \n.block__elem2 {}  \n.block__elem3 {}\n

\n

\n

...而块的 DOM 表示可以是嵌套的：

\n

\n

  <div class=\'block\'>\n     <div class=\'block__elem1\'>\n         <div class=\'block__elem2\'>\n             <div class=\'block__elem3\'></div>\n         </div>\n     </div>\n  </div> \n

\n

\n

除了类看起来更好之外，它还使元素仅依赖于块。因此，在对界面进行更改时，您可以轻松地将它们跨块移动。块 DOM 结构的更改不需要对 CSS 代码进行相应的更改。

\n

\n

因此，就您的情况而言，将它们设置为这样的样式可能会更好：

\n

<div className="article">\n  <div className="article__textbox">\n    <h1 className="article__heading"></h1>\n    <p className="article__subheading"></p>\n    <span className="article__author"></span>\n  </div>\n</div>\n

\n

本文介绍的另一种方法是将文本框视为一个单独的块，并将其所有内部结构视为其自己的元素：

\n

<div className="article">\n  <div className="textbox">\n    <h1 className="textbox__heading"></h1>\n    <p className="textbox__subheading"></p>\n    <span className="textbox__author"></span>\n  </div>\n</div>\n

\n

请记住，这都是关于 DRY 的：如果该文本框打算在其他块中重用，请将其视为块。引用同一篇文章：

\n

\n

当您\xe2\x80\x99 不确定某个东西是否是块时，请问问自己：\xe2\x80\x9c\n这个要添加到块的 BEM 元素 I\xe2\x80\x99m 是否可以用作\nother 中的组件网站的区域？\xe2\x80\x9d

\n

\n