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>
```

• Moglash: In my opinion, the real question you should ask yourself is "do I really need all these class selectors". Only declare IDs and classes when you need them. I think using class names for the <li> AND the <a> tags is not necessary.

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