CSS organization with BEM

Question

I've recently learned BEM & SASS, and I'd like to know if my BEM syntax is correct. I'm trying to create just the header of this page: https://blackrockdigital.github.io/startbootstrap-agency/

Are there any differences you would make to my class names? I get very confused about how to deal with elements when they are nested within other elements. I find that I often want to chain elements, like class="header__navbar__logo", but I've heard this is not good BEM.

<header class="header">
    <div class="header__navbar">
        <div class="container">
          <h1 class="header__logo">Start Bootstrap</h1>
          <ul class="header__navigation">
            <li class="header__nav-item"><a class="header__nav-link" href="#">Services</a></li>
            <li class="header__nav-item"><a class="header__nav-link" href="#">Portfolio</a></li>
            <li class="header__nav-item"><a class="header__nav-link" href="#">About</a></li>
            <li class="header__nav-item"><a class="header__nav-link" href="#">Team</a></li>
            <li class="header__nav-item"><a class="header__nav-link" href="#">Contact</a></li>
          </ul>
        </div>
    </div>

    <div class="header__content">
      <h1 class="heading-primary">
        <span class="heading-primary--main">Welcome To Our Studio!</span>
        <span class="heading-primary--sub">It's Nice To Meet You</span>
      </h1>
      <a class="btn btn-yellow" href="#"></a>
    </div>
  </header>
```

Answer 1

Well, if you are using Bootstrap, you should not alter the classes that Framework is using, like navabar for example.

The basic with BEM is that you should chain classes in a way to create a meaningful hierarchy, like in a component, where you have an object that contains everything else. Like that you leverage SASS nesting to create a component-like structure.

For example:

<header>

  <navbar class="navigationBar navbar">
    <div class="container">
      <div class="navigationBar--logo"></div>
        <ul class="navigationBar--navigation">
          <li class="navigationBar--navigation--item">
            <a class="navigationBar--navigation--item--link" href="#">Item-1</a>
            <a class="navigationBar--navigation--item--link" href="#">Item-2</a>
            <a class="navigationBar--navigation--item--link" href="#">Item-3</a>
          </li>
        </ul>
      </div>
    </div>
  </navbar>

 <section class="content">
    <div class="container">
      <div class="content--heading--primary">
        <span class="content--heading--primary--main">Welcome To Our Studio!</span>
        <span class="content--heading--primary--sub">It's Nice To Meet You</span>
     </div>
   </div>
 </section>

</header>

In this case the SASS will be:

.navigationBar {
    width:104px;
  
    &--logo { width:103px; }
    &--navigation {
      width:102px;
      
        &--item {
          width:101px;
          
            &--link {width:100px; } 
        }
    }
}


.content {
  width:100px;
  
  &--heading--primary {
    width: 101px;
    
    &--main { width: 102px; }
    &--sub { width: 103px; }
  }
}

Check the SASS code with SassMeister (https://www.sassmeister.com) to see how it turns to CSS