CSS organization with BEM I've recently learned BEM &amp; 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.

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

    &lt;div class="header__content"&gt;
      &lt;h1 class="heading-primary"&gt;
        &lt;span class="heading-primary--main"&gt;Welcome To Our Studio!&lt;/span&gt;
        &lt;span class="heading-primary--sub"&gt;It's Nice To Meet You&lt;/span&gt;
      &lt;/h1&gt;
      &lt;a class="btn btn-yellow" href="#"&gt;&lt;/a&gt;
    &lt;/div&gt;
  &lt;/header&gt;
```
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:
&lt;header&gt;

  &lt;navbar class=&quot;navigationBar navbar&quot;&gt;
    &lt;div class=&quot;container&quot;&gt;
      &lt;div class=&quot;navigationBar--logo&quot;&gt;&lt;/div&gt;
        &lt;ul class=&quot;navigationBar--navigation&quot;&gt;
          &lt;li class=&quot;navigationBar--navigation--item&quot;&gt;
            &lt;a class=&quot;navigationBar--navigation--item--link&quot; href=&quot;#&quot;&gt;Item-1&lt;/a&gt;
            &lt;a class=&quot;navigationBar--navigation--item--link&quot; href=&quot;#&quot;&gt;Item-2&lt;/a&gt;
            &lt;a class=&quot;navigationBar--navigation--item--link&quot; href=&quot;#&quot;&gt;Item-3&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/navbar&gt;

 &lt;section class=&quot;content&quot;&gt;
    &lt;div class=&quot;container&quot;&gt;
      &lt;div class=&quot;content--heading--primary&quot;&gt;
        &lt;span class=&quot;content--heading--primary--main&quot;&gt;Welcome To Our Studio!&lt;/span&gt;
        &lt;span class=&quot;content--heading--primary--sub&quot;&gt;It's Nice To Meet You&lt;/span&gt;
     &lt;/div&gt;
   &lt;/div&gt;
 &lt;/section&gt;

&lt;/header&gt;

In this case the SASS will be:
.navigationBar {
    width:104px;
  
    &amp;--logo { width:103px; }
    &amp;--navigation {
      width:102px;
      
        &amp;--item {
          width:101px;
          
            &amp;--link {width:100px; } 
        }
    }
}


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

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