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：根据https://en.bem.info/methodology/naming-convention/，image_stuck_left_viewport_wide不是有效的命名

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可以定义位置所需的所有逻辑。例如“卡在宽屏左侧”：

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

我不喜欢BEM混合。这个概念实际上与我所说的“巢”很近，但是：

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

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

2 个答案: