БЭМ - Как добавить условие в модификатор? - PullRequest
Новая
       27

БЭМ - Как добавить условие в модификатор?

1 голос
/ 19 марта 2019

У меня есть модификаторы позиционирования для изображений моего проекта.Один из них .image_stuck_left.
В макете есть изображение, которое должно висеть влево только на широких экранах.
Как добавить это условиек существующему модификатору?
Является ли image_stuck_left_viewport_wide добрым именем?

Ответы [ 2 ]

3 голосов
/ 20 марта 2019

Независимые блоки не должны знать о позиционировании.Попробуйте вместо этого использовать mixes .

Для вашего случая это будет примерно так.Давайте возьмем блок с именем some-section, где изображения должны быть прикреплены слева.В этом случае вы можете смешать универсальный блок image с элементом some-section: <img class="image some-section__image"> и применить стили для позиционирования к .some-section__image.

Что касается широкого окна просмотра, просто используйте медиазапросы для .some-section__image,В этом случае дополнительные классы не нужны.

PS: image_stuck_left_viewport_wide не является допустимым наименованием в соответствии с https://en.bem.info/methodology/naming-convention/

2 голосов
/ 21 марта 2019

Почему изображение остается влево только на широкоформатном экране?

Кажется, это не только ответственность за изображение, но и ответственность за макет, и, конечно, его родительский блок.

С учетом следующего HTML: 

<div class="page">
  <img class="image image--stuck-to-left-on-wide-screen" />
  <div class"page__content">
    <p>...</p>
    <p>...</p>
  </div>
</div>

Я бы создал то, что я называю гнездом , это просто элемент, созданный для приветствия дочернего блока. Гнездо - отличный способ определить размер и положение дочернего блока.

Так я бы написал: 

<div class="page">
  <div class"page__image">
    <img class="image" />
  </div>
  <div class"page__content">
    <p>...</p>
    <p>...</p>
  </div>
</div>

Итак, теперь элемент page__image может определять всю логику, необходимую нам для позиции. Например, «застрял влево на широком экране»: 

@media (min-width: 1200px) {
  .page__image {
    position: absolute;
    left: 0;
  }
}

Я не фанат БЭМ-миксов. Концепция действительно близка к тому, что я называю «гнездом», но:

  1. Гнездо - это не новая концепция, это просто обычный элемент
  2. Смесь разрушает изоляцию между двумя компонентами.
...