html - 使用 BEM CSS 制作 slider

Question

所以如果我要使用 BEM 创建一个 slider ，它会是这样的吗:

              <div class="slideshow">
               <div class="slide slide--slide01"></div>
               <div class="slide slide--slide02"></div>
               <div class="slide slide--slide03"></div>
               <div class="slide slide--slide04"></div>
              </div>

或:

             <div class="slideshow">
              <div class="slide slideshow__slide01"></div>
              <div class="slide slideshow__slide02"></div>
              <div class="slide slideshow__slide03"></div>
              <div class="slide slideshow__slide04"></div>
             </div>

请填写并说明

Answer 1

元素通常从它们嵌套的 block 中获得它们的名称。因此，我认为在这种情况下，示例一和示例二都不正确。

我最初的想法是这样的布局:

<div class="slideshow">
    <div class="slideshow__item"></div>
    <div class="slideshow__item"></div>
    <div class="slideshow__item"></div>
    <div class="slideshow__item"></div>
</div>

如果每张幻灯片彼此略有不同，您可以这样使用修饰符:

<div class="slideshow">
    <div class="slideshow__item slideshow__item--slide1"></div>
    <div class="slideshow__item slideshow__item--slide2"></div>
    <div class="slideshow__item slideshow__item--slide3"></div>
    <div class="slideshow__item slideshow__item--slide4"></div>
</div>