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

编程问答 2022-09-01

问题描述

因为我对产品卡使用嵌套 div，所以在构建我的卡时我在使用 BEM 方法时遇到了问题。对于 rec__container，我使用 display:flex 所以我可以均匀地对齐-content:space。然后，对于每张卡片，我想为国家/地区名称设置一个唯一的背景图像。我这样做正确吗？如果没有，我该如何解决？

<!----------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>

解决方法

这就是书中的 BEM，也就是它应该的样子。您的 BEM 结构是可读的，即不言自明。

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

他/她可以立即理解卡片是一个重复元素，其中有几个变体，表示为修饰语（夏威夷、冰岛、希腊），存在。

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

干得好！

bemflexboxflexboxhtml