Search code examples
csssassbem

BEM naming and positioning

I'm new to BEM and i'm trying to implement this:

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

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

  &__heading {
    display: inline-block;
  }
}

Defining the same margin-top inside details-header__heading-panel is wrong, i know, but because there is element between details-header and details-header__heading-panel, i need this margin, how do i solve this, and also keep the code DRY?

EDIT: Here is the 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>

I need margin between that div between details-header and details-header__heading-panel

Solution

  • There's nothing wrong with defining the same margin-top inside details-header and details-header__heading-panel. Just keep going with your original code. It's not copy-paste but just coincidence.