BEM Convention mit SASS - Problem zu verstehen

Question

Ich bin ein Anfänger im Front-End und versuche, die Begriffe SASS und BEM zu verarbeiten.

Ich habe große Schwierigkeiten, die Namenskonvention und ihre Organisation mit SASS zu verstehen.

Ich habe einen Produktabschnitt geschrieben, der drei div (Spalten) enthält, die selbst untergeordnete Elemente enthalten.

Ich habe keine Ahnung, wie ich die Namen gut organisieren soll. Zum Beispiel sind die img Kinder von product__preview , aber ich bin versucht, die Klasse product__img zu nennen ... aber es sieht so aus, als ob es nicht korrekt ist? Wie gehen wir mit den Namen um, wenn der Produktbereich mehrere Bilder enthält, einige jedoch unterschiedlich sein müssen? ( product__img scheint zu vage zu sein ). Muss ich für Sonderfälle eine product__preview__img-Klasse hinzufügen ?

Können Sie mir helfen, diesen Block zu korrigieren, damit ich die Benennung richtig verstehe?

Danke im Voraus!

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

Answer 1

Die Struktur, die Sie jetzt haben, ist vollkommen in Ordnung und gültig. Daher möchten Sie nicht verwenden product__preview__img. Sie würden den Zweck von BEM zunichte machen, wenn Sie diese Art von Selektoren erstellen würden, wie Sie komplexen / unorganisierten Code erstellen würden. Wenn Sie der Meinung sind, dass der Name vage ist, können Sie es versuchen, product__img-previewda dies immer noch mit dem Blockelement-Selektor und nicht mit einem gestapelten Blockelement-Selektor zusammenhängt.

Eine weitere Sache, die ich vorschlagen könnte, da Sie BEM verwenden und es vollständig nutzen, ist, die Namen Ihrer Modifikatorklassen für die erforderlichen Schaltflächen zu ändern, da dies dazu beiträgt product__btn product__btn--orange, Ihren Code wartbar zu halten, da Sie den Blockelement-Selektor neben einem Modifikator haben, der ist in diesem Fall der orangefarbene Knopf.

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

Wie Sie sehen können, sind die Modifikatoren des Blockelements die tiefste Verschachtelungsebene.