css - 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 之间有元素，我需要这个 margin ，我该如何解决这个问题，同时保持代码干燥？

编辑:这是 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 没有错。继续使用您的原始代码。 这不是复制粘贴，而是巧合。