【问题标题】：Selecting adjacent element in nested elements using BEM model使用 BEM 模型在嵌套元素中选择相邻元素
【发布时间】：2020-08-28 18:54:12
【问题描述】：

如果hl-mweb-text-banner__cta 和hl-mweb-text-banner__cta 相邻，我想添加顶部边距。我有以下内容：

.hl-events-items {
  .hl-mweb-text-banner {
     &__cta + &__fineprint {
         margin-top: 5px;
     }
}

编译成

.hl-events-items .hl-mweb-text-banner__cta + .hl-events-items .hl-mweb-text-banner__fineprint {
  margin-top: 5px;
}

在 html 中，我有这样嵌套的元素

<div class="hl-events-items">
   <div class="hl-mweb-text-banner" >
      <div class="hl-mweb-text-banner__cta">
         Shop Now 
      </div>
      <div class="hl-mweb-text-banner__fineprint">
         No Min. Max $100 off. 1x use. Ends 3/24
      </div>
   </div>
</div>

但在这种情况下工作的 CSS 是

.hl-events-items .hl-mweb-text-banner__cta + .hl-mweb-text-banner__fineprint {
  margin-top: 5px;
}

我怎样才能做到这一点。任何帮助表示赞赏。

【问题讨论】：

在 LESS 中：.hl-events-items .hl-mweb-text-banner__cta + .hl-mweb-text-banner__fineprint { margin-top: 5px; } 所有有效的 CSS 都是有效的 LESS。不要挂在不必要的嵌套事物上。

标签： html css less bem

【解决方案1】：

没有优雅的方法可以做到这一点，但如果你真的喜欢规则重叠，这是可能的。

提示：可以定义局部 sass 变量

以下代码

/* BLOCK */
.hl-mweb-text-banner {
  $prefix: &;

  &__cta + #{$prefix}__fineprint {
    margin-top: 5px;
  }
}

将被转译为

.hl-mweb-text-banner__cta + .hl-mweb-text-banner__fineprint {
  margin-top: 5px;
}

完整的用例

/* BLOCK */
.hl-mweb-text-banner {
  $prefix: &;

  /* ELEMENT */
  &__fineprint {

    /* VARIATION */
    .hl-events-items #{$prefix}__cta + & {
      margin-top: 5px;
    }
  }
}

将被转译为

.hl-events-items .hl-mweb-text-banner__cta + .hl-mweb-text-banner__fineprint {
  margin-top: 5px;
}

希望对你有帮助！干杯。

【讨论】：