在BEM方法中向子块添加特定样式的最佳方法是什么？

编程问答 2022-06-03

问题描述

我知道已经问过几次了，但在这里也是我的话。

我对BEM方法学有疑问，我正在搜索几天，但不知道什么是最好的方法。在这里：

当块的父级强制样式时，为块定义样式的最佳方法是什么？ 让我用一个例子来阐明。认为我们页面的一部分中有3个标题（块）。

<div class="specific-part">
  <img src="assets/images/my-image.jpg">
  <div class="specific-pat__content">
    <h1 class="heading heading--xLarge">First heading</h1>
    <h2 class="heading heading--large">Second heading</h2>
    <p class="heading heading--white">Description headin. here are some descriptions about what's going on...</p>
    <p><a class="btn btn--large btn--green" href="#">Get Start</a></p>
  </div>
</div>

假定第三个标题的宽度应受限制。这种有限的宽度并不是因为它是标题，而是因为标题专门位于页面的“特定部分”内。

这里有一些选择：

  1. 第一件事是添加修饰符：
<div class="specific-part">
  <img src="assets/images/my-image.jpg">
  <div class="specific-pat__content">
    <h1 class="heading heading--xLarge">First heading</h1>
    <h2 class="heading heading--large">Second heading</h2>
      <p class="heading heading--white **heading--limited**">Description headin. here are some descriptions about 
      what's going on...</p>
    <p><a class="btn btn--large btn--green" href="#">Get Start</a></p>
  </div>
</div>

但修饰符不是逻辑方法，因为宽度不是标题的特征属性，如颜色或字体粗细。我们必须应用该样式，因为它放置在该特定父对象中。此外，它不会在其他任何地方重复使用，但是在BEM中，我们尝试使用干净的可重用块和修饰符。

  1. 在第三个标题中添加另一个父元素：
<div class="specific-part">
  <img src="assets/images/my-image.jpg">
  <div class="specific-pat__content">
    <h1 class="heading heading--xLarge">First heading</h1>
    <h2 class="heading heading--large">Second heading</h2>
    <div class="**specific-part__limited**">
      <p class="heading heading--white">Description headin. here are some descriptions about 
      what's going on...</p>
    </div>
    <p><a class="btn btn--large btn--green" href="#">Get Start</a></p>
  </div>
</div>

然后将样式应用于此添加的元素。这不违反BEM规则。但是在这里，我们添加了一个不清楚的类。它以某种方式过剩。一个不想要的孩子。此外，如果我们还有其他一些需要基于父项的特定样式的子项，则还必须添加其他附加的div。 HTML文件很快就会变得混乱。

  1. 使用BEM的混合规则。
<div class="specific-part">
  <img src="assets/images/my-image.jpg">
  <div class="specific-pat__content">
    <h1 class="heading heading--xLarge">First heading</h1>
    <h2 class="heading heading--large">Second heading</h2>
    <p class="heading heading--white **specific-part__heading**">Description headin. here are some descriptions about what's going on...</p>
    <p><a class="btn btn--large btn--green" href="#">Get Start</a></p>
  </div>
</div>

，然后将样式应用于此“特定部分__标题”。但这也不是一个明确的方法。因为它不是“特定部分”块中的唯一标题。想几周后，我们想在特定零件的另一个标题中添加另一个样式。我们应该怎么做？ “ specific-part__heading”已经被使用。同样，这种方式也并不意味着它具有其名称的属性，通过阅读术语“ specific-part__heading”，我们无法发现其功能，样式应为什么？根本没有任何提示。

    一种违反BEM方法的方法，但我认为这是最好的方法。在标题类旁边的标题中添加另一个类： 
<div class="specific-part">
  <img src="assets/images/my-image.jpg">
  <div class="specific-pat__content">
    <h1 class="heading heading--xLarge">First heading</h1>
    <h2 class="heading heading--large">Second heading</h2>
    <p class="heading heading--white **specific-part__limited**">Description headin. here are some descriptions about what's going on...</p>
    <p><a class="btn btn--large btn--green" href="#">Get Start</a></p>
  </div>
</div>

通过这种方式可以很明显地看出此标题是受限制的（没有第三种方式的问题）。如果我们需要其他特定的样式，HTML文件也不会变得混乱（没有第二种方式的问题），并且我们不添加任何修饰符（属性）到没有特征的块或元素。 你怎么看？最好的方法是什么？为什么？

P.S：粗体markdown似乎无法在代码内运行，或者我不知道如何应用它，如果有人知道他/她将标记的部分编辑为粗体，我会很高兴的。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

bem