Struggling with correct BEM naming on third level

Forum /

Hi there.. i'm just beginning with BEM and love the concept but struggling a bit around with nested blocks. I want to build some kind of responsive teaser with a few elements inside.

This is what my html looks like:

<div class="teaser">

  <div class="teaser__background">
    <picture></picture>
  </div>

  <div class="teaser__featured-product"></div>

  <div class="teaser-content"> <!-- what about this correct naming and its children-elements? -->

    <div class="teaser-titles"> <!--same question here -->
      <p class="teaser-title__overline"></p>
      <h1 class="teaser-title__headline"></h1>
      <h2 class="teaser-title__subline"></h2>
    </div>

    <div class="teaser-content__text">
      <p>Lorem ipsum..</p>
    </div>

    <div class="teaser-content__legal">
      <p>1) Some terms...</p>
    </div>

    <div class="teaser-content__manufacturer-logo"></div>

  </div>

  <div class="teaser__ribbon"></div>

</div>

Inside of teaser I want to keep my content together in one block teaser-content for better positioning. So what would be the correct naming for the teaser-content-wrapper and then the following child-element teaser-titles?

I thought about a bit different version for example:

<div class="teaser-content">

    <!-- <div class="teaser-titles"> --> <!-- maybe we don't need it? -->
      <p class="teaser__title teaser__title--overline"></p>
      <h1 class="teaser__title teaser__title--headline"></h1>
      <h2 class="teaser__title teaser__title--subline"></h2>
    <!-- </div> -->

But questions are still the same. Hope really you can help me because this drives me crazy.

Greetings from the rainy Hamburg (Germany)

7 years ago

tadatuta

If there's no way to use teaser-content and teaser-titles outside of teaser, I'd go with elements like this:

<div class="teaser">

  <div class="teaser__background">
    <picture></picture>
  </div>

  <div class="teaser__featured-product"></div>

  <div class="teaser__content">

    <div class="teaser__titles">
      <p class="teaser__title-overline"></p>
      <h1 class="teaser__title-headline"></h1>
      <h2 class="teaser__title-subline"></h2>
    </div>

    <div class="teaser__text"> <!--there's no reason to resemble DOM structure in naming so you can drop `content` part -->
      <p>Lorem ipsum..</p>
    </div>

    <div class="teaser__legal">
      <p>1) Some terms...</p>
    </div>

    <div class="teaser__manufacturer-logo"></div>

  </div>

  <div class="teaser__ribbon"></div>

</div>

7 years ago

jaykobo

Thats correct, there's no way to use them outside of teaser.

Thank you very much! This helps me a lot also for further understanding.

In order to leave a comment you need to login.