BEM

Question

我的项目图像有定位修饰符。其中之一是 .image_stuck_left.
在布局中，有一个图像应该在宽屏幕上仅固定在左侧。
我应该如何将此条件添加到现有修饰符中？
image_stuck_left_viewport_wide 好听的名字吗？

Answer 1

独立块不应该知道定位。考虑改用 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/

不是有效的命名

Answer 2

为什么只有在宽屏上图像才会粘在左边？

这似乎不仅仅是图像的责任，而是布局的责任，当然是它的父块。

考虑以下 HTML：

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

我会创建一个我称之为 nest 的元素，它只是一个用来欢迎子块的元素。嵌套是决定子块大小和位置的好方法。

所以我会写：

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

所以现在，元素 page__image 可以定义该职位所需的所有逻辑。例如 "stuck to the left on wide screen":

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

我不喜欢 BEM 混音。这个概念真的很接近我所说的 "nest"，但是：

嵌套不是一个新概念，它只是一个普通的元素
混合打破了两个组件之间的隔离。

BEM - 如何向修饰符添加条件？

BEM - How to add a condition to a modifier?