小编12i*_*nit的帖子

BEM CSS和状态

一直在努力学习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>
Run Code Online (Sandbox Code Playgroud)

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

/* …
Run Code Online (Sandbox Code Playgroud)

javascript css bem

5
推荐指数
1
解决办法
165
查看次数

标签 统计

bem ×1

css ×1

javascript ×1