# CSS organization with BEM

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="container">
</ul>
</div>
</div>

<span class="heading-primary--sub">It's Nice To Meet You</span>
</h1>
<a class="btn btn-yellow" href="#"></a>
</div>
$$$$

• 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. – Dennis Fink May 12 '19 at 1:44

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>

<div class="container">
</li>
</ul>
</div>
</div>
</navbar>

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



In this case the SASS will be:

.navigationBar {
width:104px;

&--logo { width:103px; }
width:102px;

&--item {
width:101px;

}
}
}

.content {
width:100px;

`