我需要帮助我的部分使用 BEM 方法

Question

由于我将嵌套 div 用于产品卡片，因此在构建卡片时我无法使用 BEM 方法。对于 rec__container，我使用的是 display:flex，所以我可以均匀地证明内容：空间。然后，对于每张卡片，我想设置一个独特的国名背景图片。我这样做正确吗？如果没有，我该如何解决？

<!----------Recommendations------------------------->
<section class="rec">
  <h2 class="rec__title">Recommendations</h2>

  <div class="rec__container">


    <div class="rec__card rec__card--hawaii">
      <h3 class="rec__title">Hawaii</h3>
    </div>

    <div class="rec__card rec__card--iceland">
       <h3 class="rec__title">Iceland</h3>
    </div>

    <div class="rec__card rec__card--greece">
       <h3 class="rec__title">Greece</h3>
    </div>

    
  </div>
</section>

Answer 1

这就是书本上的 BEM，即应该如此。您的 BEM 结构是可读的，即不言自明。

每个查看您的项目的开发人员都能立即了解所有元素都与 rec 块相关联。

他/她可以立即理解 card 是一个重复元素，其中有几个变体，表示为修饰符（hawaii、iceland、希腊），存在。

最重要的是：您现在可以将 rec 块移动到项目中的任何位置，而不必担心块内的任何内容会因位置不同而发生变化。

干得好！