可重用组件的BEM命名技术

Question

所以我正在尝试学习BEM，基本上我有一个元素不止一次出现在不同的块中，两个块中元素的样式相同，所以通常我会给它们两个相同的类来共享样式，但在BEM中，我不确定这是否正确，下面的示例显示了页眉和页脚部分的标题块，它们遵循BEM命名约定：

<div class="l-overlay-panel">
<div class="b-overlay-panel__header">
<div class="b-overlay-panel__header-title-wrapper">
<p class="b-overlay-panel__header-title">
Filters:
</p>
</div>
</div>
<div class="b-overlay-panel__footer">
<div class="b-overlay-panel__footer-title-wrapper">
<p class="b-overlay-panel__footer-title">
Filters:
</p>
</div>
</div>
</div>

我的想法不是将其视为块级元素并命名，而是将其重命名为组件，例如，使其成为自己的独立事物，拥有自己的共享类/样式，但我认为这不符合BEM实践：

<div class="l-overlay-panel">
<div class="b-overlay-panel__header">
<div class="c-title-wrapper">
<p class="c-title-wrapper__title">
Filters:
</p>
</div>
</div>
<div class="b-overlay-panel__footer">
<div class="c-title-wrapper">
<p class="c-title-wrapper__title">
Filters:
</p>
</div>
</div>
</div>

此外，根据我的理解，这种方法的问题是，组件或元素级别的项应该只是一个单独的东西，例如<p>标签，而不是<p>标签和<div>包装器，因为这现在是它自己的块，与单个组件/元素并列。

感谢任何人能提供的帮助。

Answer 1

我可能没有正确理解你的问题，但我认为

<div class="l-overlay-panel">
<div class="b-overlay-panel__header">
<div class="c-title-wrapper">
<p class="c-title-wrapper__title">
Filters:
</p>
</div>
</div>
<div class="b-overlay-panel__footer">
<div class="c-title-wrapper">
<p class="c-title-wrapper__title">
Filters:
</p>
</div>
</div>
</div>

并不反对BEM实践，只要你没有像这样的依赖类

.b-overlay-panel__header > .c-title-wrapper{
}

你可以让它成为自己的元素。我会等待其他答案，因为我可能错了。