BEM CSS和状态

Question

一直在努力学习BEM,虽然我知道BEM不仅仅是CSS,但它似乎是一个最好的起点.

所以我做了一些基本的preloader css:https: //jsfiddle.net/ygz931s7/

并修改它以符合BEM符号:https: //jsfiddle.net/af36921w/

有问题的部分是loaded从js方面简化了东西的类,我不知道如何做'BEM'.

我的尝试导致了这个:https: //jsfiddle.net/rd40ve3m/

我的问题是:

有一个更好的方法来做到这一点.在最后的例子中,我需要修改几个元素并知道要使用的特定类,在原始示例中我需要添加一个类.

那么有更好的"BEM" - 这样做的方式吗？

这是上一个例子中提到的代码:

HTML:

<div class="container">
    <div class="loader">
        <div class="loader__element loader__element--left"></div>
        <div class="loader__element loader__element--right"></div>
    </div>
</div>

CSS:

.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

.loader__element {
  position: fixed;
  top: 0;
  width: 51%;
  height: 100%;
  background: black;
  z-index: 1000;
  transform: translateX(0);
}

.loader__element--left {
  left: 0;
}

.loader__element--right {
  right: 0;
}

/* loaded */

.loader--loaded {
  visibility: hidden;
  transform: translateY(-100%);
  transition: all 0.4s ease-out 0.8s;
}

.loader--loaded__element--left {
  transform: translateX(-100%);
  transition: all 0.4s ease-out 0.4s;
}

.loader--loaded__element--right {
  transform: translateX(100%);
  transition: all 0.4s ease-out 0.4s;
}

JS:

   setTimeout(function() {
    document.getElementsByClassName("loader")[0].classList.toggle('loader--loaded');
    document.getElementsByClassName("loader__element--left")[0].classList.toggle('loader--loaded__element--left');
    document.getElementsByClassName("loader__element--right")[0].classList.toggle('loader--loaded__element--right');


  }, 1000);

解:

BEM metodology允许嵌套选择器(https://en.bem.info/methodology/css/#nested-selectors)因此只使用loder-loaded修饰符就可以了(tnx to @tadatuta).因此生成的代码将是:

HTML:

<div class="container">
    <div class="loader">
        <div class="loader__element loader__element--left"></div>
        <div class="loader__element loader__element--right"></div>
    </div>
</div>

CSS:

.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

.loader__element {
  position: fixed;
  top: 0;
  width: 51%;
  height: 100%;
  background: black;
  z-index: 1000;
  transform: translateX(0);
}

.loader__element--left {
  left: 0;
}

.loader__element--right {
  right: 0;
}

/* loaded */

.loader--loaded {
  visibility: hidden;
  transform: translateY(-100%);
  transition: all 0.4s ease-out 0.8s;
}

.loader--loaded .loader__element--left {
  transform: translateX(-100%);
  transition: all 0.4s ease-out 0.4s;
}

.loader--loaded .loader__element--right {
  transform: translateX(100%);
  transition: all 0.4s ease-out 0.4s;
}

JS

   setTimeout(function() {
    document.getElementsByClassName("loader")[0].classList.toggle('loader--loaded');
  }, 1000);

Answer 1

只需切换loader修饰符就足够了。在这种情况下，元素的样式可以使用嵌套。有关更多信息，请参阅https://en.bem.info/methodology/css/#nested-selectors 。