БЭМ CSS и состояния - PullRequest
Новая
       5

БЭМ CSS и состояния

0 голосов
/ 24 сентября 2018

Я пытался изучать БЭМ, и хотя я знаю, что БЭМ - это не просто 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);

Ответы [ 2 ]

0 голосов
/ 24 сентября 2018

Пространство имен ваших классов БЭМ - хорошая идея для их классификации.Используйте эти префиксы для разных типов классов:

c- => для автономных компонентов .

l- => для позиционирования c-компонентов и структурирования макет приложения .

h- => присоединить отдельную функцию к компонентам.

is- / has- => присоединить состояние к компонентам.

js- => прикрепить поведение JavaScript к компоненту.

Для получения дополнительной информации: Борьба с BEM CSS: 10 распространенных проблемИ как их избежать

Также я добавил пространство имен к коду: jsfiddle

0 голосов
/ 24 сентября 2018

Достаточно просто переключить модификатор loader.Стили для элементов могут использовать вложенность в этом случае.См. https://en.bem.info/methodology/css/#nested-selectors для получения дополнительной информации.

...