具有SASS的BEM公约-需要理解的问题

问题描述

我是前端的初学者，我尝试吸收SASS和BEM的概念。

我很难理解命名约定及其与SASS的组织方式。

我写了一个产品部分，其中包含三个div（列），它们本身包含子元素。

我不知道如何组织好名字。例如， img是product__preview 的子级，但是我很想将其命名为 product__img ....，但是看起来不正确吗？如果“产品”部分中有几张图片，但其中一些图片必须不同，我们如何处理名称？（产品__img似乎太含糊）。我是否需要为特殊情况添加 product__preview__img类？

您能帮我纠正此问题，以便我正确理解其命名吗？

提前谢谢！

 <section class="product">
    <img class="product__cover product__item" src="./images/nintendo/marioodyssey/marioodyssey-1.jpg" alt=""
        srcset="">
    <div class="product__preview product__item">
        <img class="product__img" src="./images/nintendo/marioodyssey/marioodyssey-2.jpg" alt="" srcset="">
        <img class="product__img" src="./images/nintendo/marioodyssey/marioodyssey-3.jpg" alt="" srcset="">
        <img class="product__img" src="./images/nintendo/marioodyssey/marioodyssey-3.jpg" alt="" srcset="">
    </div>

    <div class="product__content product__item">
        <h4 class="product__title">Super Mario Odyssey</h4>
        <p><span> Date: </span> 2017</p>
        <p><span> Story: </span> Super Mario Odyssey[b] is a platform game developed and published by Nintendo for
            the Nintendo Switch on October 27,2017. An entry in the Super Mario series,it follows Mario and Cappy,a sentient hat that allows Mario to control other characters and objects,as they journey across varIoUs
            worlds to save Princess Peach from his nemesis Bowser,who plans to forcibly marry her. In contrast to
            the linear gameplay of prior entries,the game returns to the primarily open-ended,3D platform gameplay
            featured in Super Mario 64 and Super Mario Sunshine.[1] </p>
        <p><span> Review: </span></p>
        <button class="product__btn btn-orange-tiger">Add to cart</button>
        <button class="product__btn btn-orange-tiger">Go to cart</button>
        <button class="product__btn btn-orange-tiger">Keep buying</button>
    </div>
</section>

解决方法

您现在拥有的结构完全正确且有效。因此，您不想使用product__preview__img。如果要像创建复杂/无组织的代码那样创建选择器，那么您将无法达到BEM的目的。如果您觉得这个名字含糊不清，可以尝试使用product__img-preview，因为它仍然与块元素选择器（而不是堆叠的块元素选择器）联系在一起。

由于您正在使用BEM并充分利用它，因此我建议您做的另一件事是将您必须使用的按钮的修饰符类名称更改为product__btn product__btn--orange，因为这将有助于保留您的代码可维护的，因为在块元素选择器旁边有一个修饰符，在这种情况下为橙色按钮。

.product {
  ...
  &__features {
    ...
  }
  &__btn {
     ...
     &--orange {
       ... 
    }
  }
}

如您所见，最深层的嵌套层是block元素的修饰符。

bem frontend html sass sass