BEM命名与定位

Question

我是 BEM 的新手，我正在尝试实现这个：

.details-header {
  margin-top: 10px;
  padding-bottom: 0;
  display: block;

  &__heading-panel {
    margin-top: 10px; 
  }

  &__heading {
    display: inline-block;
  }
}

在details-header__heading-panel中定义相同的margin-top是错误的，我知道，但是因为details-header和details-header__heading-panel之间有元素，我需要这个边距，我该如何解决这个，还要保持代码干燥？

编辑：这是 html:

<div class="details-header">
        <div>Something</div>
        <div class="details-header__heading-panel">
            <h1 class="details-header__heading">
                <span>something</span>
            </h1>
            <a>
                Link
            </a>
        </div>
    </div>

我需要 details-header 和 details-header__heading-panel

之间的 div 之间的余量

Answer 1

在 details-header 和 details-header__heading-panel 中定义相同的 margin-top 没有错。继续使用您的原始代码。这不是复制粘贴，只是巧合。

BEM命名与定位

BEM naming and positioning

css

sass

bem