使用BEM CSS制作滑块

Question

因此，如果我使用BEM创建一个滑块，它将如下所示：

              <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

元素通常从嵌套在其中的块中获取其名称。因此，我会争辩说，在这种情况下，示例一或示例二都不正确。

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

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

Answer 2

元素由两(2)个下划线(__)分隔，修饰符由两(2)个连字符(--)分隔。

在本例中，您应该使用两个下划线(__)。

Original article