Блог

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

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

В вашем случае это было бы что-то вроде этого. Давайте создадим блок с именем 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 /

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

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

Учитывая следующий 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;
  }
}
  

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

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