Я пытался изучать БЭМ, и хотя я знаю, что БЭМ - это не просто CSS, мне кажется, что это лучшее место для начала.
Поэтому я сделал несколько базовых preloader css: https://jsfiddle.net/ygz931s7/
И изменил его так, чтобы он соответствовал нотации БЭМ: https://jsfiddle.net/af36921w/
Проблемной частью был класс loaded
, который упрощал вещи со стороны js, что я не знал, как делать «БЭМ».
Моя попытка привела к следующему: https://jsfiddle.net/rd40ve3m/
Мой вопрос:
Есть лучший способ сделать это.В последнем примере мне нужно изменить несколько элементов и знать конкретные классы для использования, где в исходном примере мне нужно только добавить один класс.
Так есть ли лучший "БЭМ" - способ сделать это?
Вот код, указанный в последнем примере:
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 метод позволяет использовать вложенные селекторы (https://en.bem.info/methodology/css/#nested-selectors) поэтомупросто используя загрузчик модификатора, все будет в порядке (от tnx до @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);